如何使用JQuery逐個顯示列表？

Question

我想顯示/隱藏列表逐一使用JQuery，這裏是我的代碼： 名單：

<p>This is the text</p> 
<p>This is the text 1</p> 
<p>This is the text 2</p> 

的按鈕功能：

$("#hide").on("click", function(event) { 
hideList($("p"), 0); 
}); 

這裏是將隱藏功能/顯示列表：

function hideList(list, index) { 
    if (index < list.length) { 
     list.eq(index).toggle(2000, hideList(list, index+1)); 
    } else { 
     return; 
    } 
} 

但是當按鈕點擊時，3 <p>是隱藏起來，而不是一個接一個。但這樣的代碼工作中，<p>逐一顯示：

$("#show").on("click", function(event) { 
    $("p").eq(0).toggle(2000, function() { 
     $("p").eq(1).toggle(2000, function() { 
      $("p").eq(2).toggle(2000); 
     }); 
    }); 
}); 

有誰知道是什麼原因造成的問題？非常感謝你。

Answer 1

你需要一個函數引用作爲完整的回調傳遞給toggle，在你的情況你調用函數並傳遞由hideList返回的值 - undefied作爲回調

function hideList(list, index) { 
    if (index < list.length) { 
     list.eq(index).toggle(2000, function(){ 
      hideList(list, index+1) 
     }); 
    } else { 
     return; 
    } 
} 

演示：Fiddle

Answer 2

Arun的答案是正確的，但爲什麼不只是繼續使用jQuery。使用延遲和隊列。

function hideList(list){ 
$(list).each(function(index, element) { 
     $(this).delay(2000*index).queue(
      function(n){ 
       $(this).toggle() 
       n(); 
      }) 
    }) 
}