如何使用 JQuery 逐一显示列表？答案

【问题标题】：How to display a list one by one using JQuery?如何使用 JQuery 逐一显示列表？
【发布时间】：2013-07-26 11:55:29
【问题描述】：

我想使用 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);
        });
    });
});

有谁知道是什么导致了这个问题？非常感谢。

【问题讨论】：

标签： jquery effect

【解决方案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

【讨论】：

【解决方案2】：

Arun 的回答是正确的，但为什么不继续使用 jquery。使用延迟和队列。

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

【讨论】：