Javascript 中的效果队列答案

【问题标题】：Effect Queues in JavascriptJavascript 中的效果队列
【发布时间】：2011-06-07 19:09:28
【问题描述】：

我正在尝试创建一个在队列中工作的效果，以便每个效果仅在前一个效果完成后才开始。我成功了，但我确信有更清洁的方法。

这是我目前所拥有的：

$("tr:last td:nth-child(1) div").slideUp(200, function() {
    $("tr:last td:nth-child(2) div").slideUp(200, function() {
        $("tr:last td:nth-child(3) div").slideUp(200, function() {
            $("tr:last td:nth-child(4) div").slideUp(200, function() {
                $("tr:last td:nth-child(5) div").slideUp(200, function() {
                    $("tr:last td:nth-child(6) div").slideUp(200, function() {
                        $("tr:last td:nth-child(7) div").slideUp(200, function() {
                            $("tr:last").remove();
                        });
                    });
                });
            });
        });
    });
});

一定有更清洁的方法，对吧？

提前很多。

【问题讨论】：

标签： javascript jquery jquery-animate

【解决方案1】：

正如您在问题中所说的那样。使用.queue()。

http://api.jquery.com/queue

并检查：

What are queues in jQuery?

【讨论】：

它是否对不同元素的效果进行排队？阅读文档我会说no，每个元素都有自己的队列。那你会怎么用queue呢？

【解决方案2】：

哎呀，太可怕了！我会使用delay：

var divs = $("tr:last td div");
divs.each(function(idx, el) {
    $(this).delay(idx * 200).slideUp(200, function(){
        if (idx === divs.length - 1) { // 0-based index
            $("tr:last").remove()
        }
    });
});

【讨论】：

哇！美丽的！谢谢！我可以使用每个循环来执行此操作吗？
新版本看起来更干净了...不错:) +1
您介意解释一下您对“idx”和“el”做了什么，而不是完全遵循它。 =)
@user See the documentation for each。 idx 是元素在选择中的位置； el 是正在处理的元素，与this 相同。
为了使其更灵活，最好是if(($(this).closest('td').is(':last')) { /* remove */}。会更慢，但不取决于行中 td 的数量。或者你事先算上td。

【解决方案3】：

你可以做一个递归函数：

function slide(i) {
    if(i < 8) {
        $("tr:last td:nth-child(" + i + ") div").slideUp(200, function() {
            slide(i+1);
        });
    }
    else {
        $("tr:last").remove();
    }
}
slide(1);

但这都是硬编码的......

【讨论】：