在jquery fadeIn（）在

Question

我在加载时尝试淡入索引页面（不同内容的时间不同淡化）。

他们中的大多数都在工作，直到我添加了3个新的div，新的div正确淡入，但是一旦它们淡入100％的不透明度，他们就会隐藏并且不显示。

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

该课程标有“家庭容器”字样。是装载后隐藏的容器。我不明白为什么会这样做？

Answer 1

您应该在每个fadeIn之前移除.hide()，只需添加opacity: 0或display: none的css类;

.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设置隐藏状态并在加载时淡入div：

CSS：

#yourElement { display: none }

jQuery的：

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