Jquery:如何按顺序而不是一次性地在多个对象上触发相同的事件

Question

我有一个div页面，我想在页面加载时重新排序，将特定类的div移动到页面的顶部。

在大多数情况下，我使用insertAfter()来完成这项工作。然而，我想按顺序启动事件，这样动画就有了更多的阶梯。

您可以看到我目前在这个jsFiddle的位置。

HTML：

<div class="lists">
    <div class="marker"></div>
    <div class="row0">Item</div>
    <div class="row0">Item</div>
    <div class="row0">Item</div>
    <div class="row99">Item</div>
    <div class="row0">Item</div>
    <div class="row0">Item</div>
    <div class="row0">Item</div>
    <div class="row99">Item</div>
    <div class="row0">Item</div>
    <div class="row99">Item</div>
    <div class="row0">Item</div>

</div>

使用这个jquery函数。

$('.row99').each(function(i,e){
    $(e).delay(500).slideUp(1000, function(){
        $(this).insertAfter('.marker').slideDown(1000);
        });
    });

正如您将看到的，在页面加载特定的div上滑动，插入在顶部，然后向下滑动。然而，所有特殊的div同时开火。

是否有办法使这些项目一个接一个地激发，而不是同时进行呢？

其次，你会看到，当div下滑，然后是相反的顺序(10-8-4)。这不是什么大事，但如果有办法保持基本秩序(4-8-10)而不是逆转它，我也会喜欢的。

Answer 1

把延迟堆起来

$('.row99').each(function(i,e){
    $(e).delay((i+1)*1000).slideUp(1000, function(){
        $(this).insertAfter('.marker').slideDown(1000);
    });
});

小提琴

保持顺序的一个简单方法是添加一个类，获取该类的最后一个实例，然后用insertAfter代替

$('.row99').each(function (i, e) {
    $(e).delay((i + 1) * 1000).slideUp(1000, function () {
        var n = i!==0 ? $('.moved:last') : $('.marker');
        $(this).insertAfter(n).addClass('moved').slideDown(1000);
    });
});

小提琴

Answer 2

这里有一种方法可以使用完成函数使它们一个接一个地运行，而不会真正改变您的主要逻辑：

(function() {
    var items = $(".row99");
    var index = 0;
    function next() {
        if (index < items.length) {
            items.eq(index++).slideUp(1000, function() {
                $(this).insertAfter('.marker').slideDown(1000, next);
            });
        }
    }
    next();
})();

工作演示：http://jsfiddle.net/jfriend00/ZfVw5/

简而言之，您使用的代码与您所使用的完全相同，但是不是在.each()循环中运行操作，而是每次运行一个计数器，以便获取列表中的下一个计数器。结束.slideDown()中的完成函数将开始下一次迭代。当您的计数器指向对象列表的末尾时，整个过程就结束了。