jQuery - ajouter des éléments de liste à la liste existante avec une animation progressive

Question

J'ai une liste:

<ul> 
<li> bla bla </li> 
<li> bla bla </li> 
... 
</ul> 

<a> click me </a> 

lorsque vous cliquez sur le lien se exécute demande ajax qui récupère plusieurs éléments de liste.

Comment puis-je ajouter ces nouveaux éléments à la liste existante (où les points sont), et les animer un par un, en utilisant par exemple. slidedown, petite pause, prochain objet slidedown, petite pause à nouveau etc ...?

en ce moment j'ai ce qui anime tous les éléments de la liste simultanément:

$.ajax({ 
     ... 
     success: function(response){ 

      $(response).appendTo("ul").hide().animate({ 
      "height": "show", 
      "marginTop": "show", 
      "marginBottom": "show", 
      "paddingTop": "show", 
      "paddingBottom": "show"}, 
      { duration: 333 }); 
     ... 

Answer 1

vous pouvez ajouter un .delay() en fonction de l'indice, comme celui-ci:

jQuery(response).appendTo("ul").hide().each(function(i) { 
    jQuery(this).delay(400*i).animate({ 
     "height": "show", 
     "marginTop": "show", 
     "marginBottom": "show", 
     "paddingTop": "show", 
     "paddingBottom": "show"}, 333); 
}); 

Cela va le premier instant (400 * 0), le deuxième 400ms (400 * 1) plus tard (délai de 67ms), etc. Ajustez simplement le délai à ce que vous voulez, mais c'est un moyen facile d'obtenir le style d'animation un-par-un.