Fade elements in incrementally on window load

Question

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!

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

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

Answer 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