.delay() ignoré après .animate()

Question

Je nombre de divs, qui devrait augmenter après l'autre.
L'animation de développement de chaque div doit être retardée jusqu'à ce que l'animation de la div précédente soit terminée. Cela fonctionne comme prévu.

Après l'animation de chaque étape, je veux être possible de retarder l'animation de la prochaine div un peu plus loin. Mon problème est que jQuery ignore complètement le délai après l'animation.
Y at-il quelque chose de mal à appeler .delay() après .animate()?

Ceci est mon code actuel:

$('div').each(function(index){ 
    $(this).delay(index*$stepspeed).animate({height: $stepheight[index]}, $stepspeed).delay((index+1)*$stepdelay+$startdelay); 
}); 

---

Réponse

Je l'ai résolu en utilisant if sauter le retard dans la première div.
C'est le code que je l'ai utilisé:

$('div').each(function(index){ 
    if(index == 0) {$(this).delay($fadespeed).animate({height: $stepheight[index]}, $stepspeed);} //No delay for the first div 
    else {$(this).delay($fadespeed+index*$stepspeed+(index+1)*$stepdelay+$startdelay).animate({height: $stepheight[index]}, $stepspeed);} 
}); 

Answer 1

Peut-être il y a une solution qui est beaucoup plus simple, mais voici ma solution (fiddle).

Construire une fonction qui est appelée pour chaque div après un petit délai d'attente dans une boucle comme la mode:

$(function() { 
    var el = $('div'); 
    lp(0); 
    function lp(count){ 
     $(el.get(count)).animate({height: '200px'}, {duration: 500, queue: true, complete: function() { 
      setTimeout(function(){ 
       if(count != el.length-1) 
       { 
        count++; 
        lp(count); 
       } 
      }, 500); 
     }}); 
    } 
});