Jquery image fadein delay by X

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>

标签： jquery timer delay fadein

3条回答

SAY GOODBYE

2楼-- · 2019-08-28 02:14

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

.delay() function

0人赞添加讨论(0) 举报

再贱就再见

3楼-- · 2019-08-28 02:26

Yes, there's the delay function for exactly that.

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

That starts them one second apart.

Live example (using the slightly off-topic update below, and slightly different delay times, but you get the idea)

Off-topic: I think I'd hide the images earlier than window.onload. That'll only fire when every single last thing has fully loaded, so as it is now, by and large the images will appear, then disappear, then fade in.

You might consider doing this right at the top of your <body> element:

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

and adding this CSS:

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

then

jQuery(function($) {

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

...or similar.

0人赞添加讨论(0) 举报

劫难

4楼-- · 2019-08-28 02:28

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

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>

Refernce: jquery fadeIn()

0人赞添加讨论(0) 举报

Jquery image fadein delay by X

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间