title: Jquery Curtain down effect
body: <p>I want to make a curtain down animation from the top (below navbar) to the bottom of the page, pushing on top of whatever page the user was on, but it should starts with a grey background during 500 milliseconds.
  The page structure is something like this:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="viewport"&gt;
          content here
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and I'm using this:</p>
  
  <pre><code>$("#viewport").hide("blind", { direction: "down" }, 500, function (){
      // render target page
  });
  </code></pre>
  
  <p>The problem is how make that effect with a grey background, which is different at the current one. Is there another way to achieve it?
  thanks</p>