jQuery技术:Jquery图像fadein延迟X

您可以使用fadeIn（）的回调来启动下一个图像的淡入，就在前一个图像完成时。 尝试这样的事情：

 $('.fader1').fadeIn(3000, function() { $('.fader2').fadeIn(3000, function() { $('.fader3').fadeIn(3000); }); }); 

但是从你已经隐藏的

参考： jquery fadeIn（）

是的，确切地说就是delayfunction 。

 $('.fader1').hide().fadeIn(3000); $('.fader2').hide().delay(1000).fadeIn(9000); $('.fader3').hide().delay(2000).fadeIn(6000); 

这开始他们一秒钟。

实例 （使用下面稍微偏离主题的更新，稍微不同的延迟时间，但你明白了）

偏离主题 ：我想我会比window.onload更早地隐藏图像。 只有在最后一件事完全加载时才会触发，因此现在，大体上图像会出现，然后消失，然后淡入。

您可以考虑在元素的顶部执行此操作：

并添加此CSS：

 body.loading .fader1, body.loading .fader2, body.loading .fader3 { display: none; } 

然后

 jQuery(function($) { $(window).load(function() { $('body').removeClass("loading"); $('.fader1').hide().fadeIn(3000); $('.fader2').hide().delay(1000).fadeIn(9000); $('.fader3').hide().delay(2000).fadeIn(6000); }); }); 

……或类似的。

.delay（）函数