javascript - FadeIn content jumps on load

Question

I'm doing a fadeOut of a full screen image. The problem is that when the wrapper fadeIn it's content (the image on the middle ) makes a jump of about 20px.

Any idea why is that happening?

This is my code:

    // Home FadeIn
    function home_timeout(){
        setTimeout(function(){
            $('#intro-image').fadeOut(700);
            $('#wrapper').fadeIn(700);
        }, 2000);
    }

It happens the first time the page is loaded and not on cache.

I have already added a height to the wrapper and still it doesn't fix it:

body.home #wrapper {
   display: none;
   height: 777px;
}

Answer 1

Instead of using display set to none, use opacity:

body.home #wrapper {
   opacity:0;
   height: 777px;
}

And then use fadeTo() method:

function home_timeout(){
        setTimeout(function(){
            $('#intro-image').fadeOut(700);
            $('#wrapper').fadeTo(700,1);
        }, 2000);
    }

Try and see...

Answer 2

You can try to add height to navigation list....

add
ul { height:110px; }

I hope this will fix your problem..