Hi. I'm trying to add a transition to a site where the page fades to black when a user navigates through the site. Here's an example of what I have so far.
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.
So far I've managed to create the code for the "fade to black" effect...
$(document).ready(function(){
// Insert mask after container
$('.container').after('<div class="mask"></div>');
// 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');
});
But I'm not sure how to get the page to "fade from black" when the user clicks another part of the site.
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?
Many thanks for your time.