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: 
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;
}

```
The white flash is happening because in those few moments before the .ready() function is fired, your body element is showing. This will get worse on slow connections.

What you might try to do instead is overlay a div on top of your body, and then fade that div out. But your results will still vary depending on browser/network speed.

In CSS:

```
.overlay {
  display: block;
  background-color: #000;
  position: fixed;
  width: 100%; 
  height: 100%;
  z-index: 999;
}

```

And in JS:

```
$(document).ready(function () {
  $('.overlay').fadeOut();

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

```

**This is still pretty bad.** When you load a new page you're giving a lot of the experience away to the browser on how it decides to transition to the next page.

You might consider transitioning via AJAX instead:

```
function transition() {
  var loadContent = $.get('/url-to-content');

  $('.overlay').fadeIn(1000, function () {
    loadContent.then(function (data) { 
      $('.content-div').html(data);
      $('.overlay').fadeOut(1000);
    });
  });
}

```