Div is hiding after jquery fadeIn() has fully faded in

Question

I'm trying to fade in the index page when it is loaded (different fade in times for different content).

Most of them were working until I added 3 new divs, the new divs fade in correctly but once they are faded in to 100% opacity they then hide and do not show.

$(document).ready(function(){
    $('.container').hide().fadeIn(2000);
    $('#topbar').hide().fadeIn(3000);
    $('#bg').hide().fadeIn(2000);
    $('.home-container').hide().fadeIn(4000);
});

The class marked 'home-container' is the container that hides after loading. I can't understand why it is doing this?

Answer 1

You should remove your .hide() before every fadeIn and simply add a css class with either opacity: 0 or display: none;

.container { display: none; }
#topbar { display: none; }
#bg { display: none; }
.home-container { display: none; }

and the jQuery as following:

$(document).ready(function(){
    $('.container').fadeIn(2000);
    $('#topbar').fadeIn(3000);
    $('#bg').fadeIn(2000);
    $('.home-container').fadeIn(4000);
});