Jquery image fadein delay by X_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-16 10:54 出处：网络

How can I get my images to appear one after the other? I am current开发者_运维问答ly using Jquery fadein to make my images fadein but I want them to start at different times. Is there anyway i can del

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

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.

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

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

.delay() function