Jquery图像fadein延迟X

如何让我的图像一个接一个地出现？ 我目前正在使用Jquery fadein使我的图像淡化，但我希望它们在不同的时间开始。 无论如何我可以延迟图像淡入？ 很快？

 $(document).ready(function(){ window.onload = function() { $('.fader1').hide().fadeIn(3000); $('.fader2').hide().fadeIn(9000); $('.fader3').hide().fadeIn(6000); }; });  
 
 
 

Answer 1

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

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

但是从你已经隐藏的

开始：

参考： jquery fadeIn（）

Answer 2

是的，确切地说就是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); }); }); 

……或类似的。

Answer 3

http://api.jquery.com/delay/

.delay（）函数