Fade elements in incrementally on window load

问题

I'm looking to fade in divs with a certain class in code order, with each fade coming maybe 250ms after the last, giving the impression of a gradual page load.

I'm this far for fading in everything at once...

$(window).load(function(){ 
   $('div.fade_this_please').fadeIn(4000);
});

but I'm not sure where I'm going to cycle through each DIV and fade it in when the other is complete.

Can someone point me in the right direction!?

Any advice appreciated!

回答1:

This fades all divs into view, each with a progessing 250ms delay. I'd recommend reducing the fade time to 2 seconds for each at max, 4 seconds seems waaay too long and will probably annoy people ;-)

$(window).load(function() {
   $('div').each(function(i) {
      $(this).delay((i + 1) * 250).fadeIn(2000);
   });
});

回答2:

You can iterate through them and set a delay before the fadeIn():

$(window).load(function(){
   var delay = 0;
   $('div.fade_this_please').each(function(){
      $(this).delay(delay).fadeIn(4000);
      delay += 250;
   });
});

回答3:

try with

$('div.fade_this_please').fadeIn(4000).delay(250);

or

jQuery(function($){
var e = $('div.fade_this_please'); 
e.fadeIn(); 
e.queue(function(){ 
  setTimeout(function(){ 
    e.dequeue(); 
  }, 250 ); 
}); 
});

reference

来源：https://stackoverflow.com/questions/6057270/fade-elements-in-incrementally-on-window-load