Eléments de fondu en incrémental sur la charge de la fenêtre

Question

Je cherche à fondre des divs avec une certaine classe dans l'ordre du code, chaque fondu pouvant arriver 250 ms après le dernier, donnant l'impression d'un chargement progressif de la page.

Je suis loin pour la décoloration dans tout à la fois ...

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

mais je ne sais pas où je vais passer en revue chaque DIV et fade quand l'autre est complète .

Quelqu'un peut-il me diriger dans la bonne direction?

Un conseil apprécié!

Answer 1

Ceci divise tous les divs, chacun avec un retard de 250ms progressif. Je vous recommande de réduire le temps de transfert à 2 secondes pour chaque au maximum, 4 secondes semble waaay trop long et va probablement agacer les gens

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

Answer 2

essayer avec

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

ou

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

reference

Answer 3

Vous pouvez itérer à travers eux et définir un délai avant la fadeIn():

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