的jQuery - 添加列表項現有的清單，逐步動畫

Question

所以我有一個列表：

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

<a> click me </a> 

當你點擊鏈接，檢索多個列表項的Ajax請求運行。

如何將這些新項目追加到現有列表（點的位置），並逐個爲它們設置動畫效果，例如，滑下，小停頓，下一項滑動，再次小停頓等等......？

現在我有這個，它同時動畫的所有列表項：

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

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

Answer 1

可以基於索引添加.delay()，像這樣：

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

這運行的第一個瞬間（ 400 * 0），第二個400ms（400 * 1）以後（67ms延遲）等等。只要將延遲調整到任何你想要的，但這是獲得逐一動畫風格的簡單方法。