Javascript中的效果队列

Question

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

这是我到目前为止:

$("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();
                        });
                    });
                });
            });
        });
    });
});

必须有一个更清洁的方式,对吗？

事先有很多责任.

Answer 1

正如你在问题中所说.使用.queue().

http://api.jquery.com/queue

并检查:

jQuery中的队列是什么？

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