Jquery fadeIn and fadeOut of page is generating a white page flash between loads

Question

I'm having an issue using the fadeIn and fadeOut of my web pages using jQuery. When the script runs my page fades out and then I get a white flash and then my new page fades in. Is this typical for this jQuery effect? It's kind of an issue for me because the site is very dark with a black background so it's quite jarring.

Below is my script that I'm using to run these effects. Could it be an issue with the page redirecting that is generating this? Is there a more effective way of doing this?

$(document).ready(function() {

    $("body").css("display", "none");

    $("body").fadeIn(2000);

    $("a.transition").click(function(event){
        event.preventDefault();
        linkLocation = this.href;
        $("body").fadeOut(1000, redirectPage);      
    });

    function redirectPage() {
        window.location = linkLocation;
    }

});

Thanks in advance guys. Appreciate the help.

Patrick

Answer 1

When the fadeOut animation completes it will set display:none on body. This is probably the source of your white flash. Try wrapping your entire page inside a div within the body, and fading that div out.

Or try applying this CSS:

html,body {
  background-color:#000;
}