jQuery图像淡入延迟X [英] Jquery image fadein delay by X

问题描述

如何使我的图像一个接一个地显示?我目前正在使用Jquery淡入淡出使图像淡入淡出，但我希望它们在不同的时间开始.无论如何，我可以延迟图像淡入吗?在几秒钟内?

How can I get my images to appear one after the other? I am currently using Jquery fadein to make my images fadein but I want them to start at different times. Is there anyway i can delay an image from fading in? in seconds?

 <script type="text/javascript">
$(document).ready(function(){

window.onload = function() {

$('.fader1').hide().fadeIn(3000);
$('.fader2').hide().fadeIn(9000);
$('.fader3').hide().fadeIn(6000);
};


});
 </script>


 <div class="fader1"><img src="demo.jpg"></div> 
<div class="fader2"><img src="demo.jpg"></div> 
<div class="fader3"><img src="demo.jpg"></div>

推荐答案

您可以使用fadeIn()的回调在上一个图像完成时开始下一个图像的淡入.尝试这样的事情:

You could use fadeIn()'s callback to start the fading in of the next image just when the previous one completes. Try something like this:

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

但首先要隐藏您的< div>:

but start with your <div>'s already hidden:

<div class="fader1" style="display: none;"><img src="demo.jpg"></div> 
<div class="fader2" style="display: none;"><img src="demo.jpg"></div> 
<div class="fader3" style="display: none;"><img src="demo.jpg"></div>

引用: jquery fadeIn()

这篇关于jQuery图像淡入延迟X的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！