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

```
I know this is rather old, but I just had the same issue and will put my two cents in. It was definitely that the element I was fading in (a div with a background image which was being lazyloaded - the whole div was being faded in).

My solution was to put it in its own overlay div. The problem was then solved.

My overlay div, as a first child of the element I had been using the lazy load on:

```
<div 
  class="bgimg-overlay lazy"
  style="back"
  data-original="<?=$tpldir?>/img/LAST_FRAME_CROPPED.PNG"></div>

```

The CSS for the div:

```
.bgimg-overlay{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

```