Div 在 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);
});

标记为'home-container'的class是加载后隐藏的容器。我不明白为什么要这样做？

Answer 1

尝试设置隐藏状态形成 css 并在加载时淡入 div：

CSS:

#yourElement { display: none }

jQuery:

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

Answer 2

您应该在每次淡入之前删除您的 .hide() 并简单地添加 css class 和 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);
});

Div 在 jquery fadeIn() 完全淡入后隐藏

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

jquery

fadein