title: Fading out a whole page with jquery
body: <p>So, I'm attempting to fade the page out when a user goes to another section of my website. After reading a bit on stack overflow, I have written the following code. But it just seems messy/ugly. Is there a proper way to fade out a webpage, or is it all hacky? It seems (at the moment) like my page is getting dumped before it has the chance to fade.</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://www.catlard.com/styles/body.css" type="text/css"/&gt;
  &lt;link rel="icon" href="http://www.catlard.com/caticon.ico" /&gt;
  &lt;link rel="shortcut icon" href="http://www.catlard.com/caticon.ico?v=2" /&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"&gt; &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready( function(){
          $("html").hide();
          $("html").delay(250).fadeIn();  
          $(window).unload(function () {
              $("html").fadeOut();
          });
      });
  &lt;/script&gt;
  </code></pre>