Question

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

 <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>

Answer 1

是的，确实存在delay function。

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

相隔一秒开始。

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

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

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

<body>
<script>document.body.className = "loading";</script>

并添加此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 2

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

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

但是从你的＆lt; div＆gt;已经隐藏起来开始：

<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()

Answer 3

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

.delay（）函数

Jquery图像fadein延迟X

3 个答案: