Div скрывается после того, как jquery fadeIn() полностью исчез в

Question

Я пытаюсь затухать на индексной странице, когда она загружается (разные времена затухания для разного содержимого).

Большинство из них работали до тех пор, пока я не добавил 3 новых div, новые divs исчезнут правильно, но как только они исчезнут до 100% непрозрачности, они затем спрячутся и не показывают.

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

Класс, обозначенный как «домашний контейнер», является контейнером, который скрывается после загрузки. Я не понимаю, почему он это делает?

Answer 1

Вы должны удалить ваши .hide() перед каждым FadeIn и просто добавьте класс css с opacity: 0 или display: none;

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

и JQuery следующим образом:

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

Answer 2

Попробуйте установить скрытое состояние формируют CSS и FadeIn дивы на нагрузке:

CSS:

#yourElement { display: none } 

JQuery:

$(window).load(function() { 
    $('#yourElement').fadeIn(); 
});