title: How do I add a page transition when leaving page with jQuery
body: <p>I'm trying to add a transition to a site where the page fades to black when a user navigates through the site.</p>
  
  <p>I decided the best way to achieve this was to create a div which will mask the page in blackness and then animate it with jQuery.</p>
  
  <p>So far I've managed to create the code for the "fade to black" effect...</p>
  
  <pre><code>$(document).ready(function(){
      // Insert mask after container
      $('.container').after('&lt;div class="mask"&gt;&lt;/div&gt;');
      // Delay the fadeOut effect for half a second so you can actually see it
      $('.mask').animate({opacity: 1.0}, 500)
      // Slowly make the mask dissapear
      .fadeOut('slow');
  });
  </code></pre>
  
  <p>But I'm not sure how to get the page to "fade from black" when the user clicks another part of the site.</p>
  
  <p>I understand I would have to use the click function, but how would I delay the page from loading in time to be able to see the "fade to black" animation?</p>
  
  <p>Many thanks for your time.</p>