Question

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

在大多数情况下，我使用insertAfter()进行此操作。但是，我想按顺序发射事件，因此动画的步骤更多。

你可以看到我目前在this 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);
    });
});

FIDDLE

保持顺序的一种简单方法是添加一个类，获取该类的最后一个实例，然后插入那个

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

FIDDLE

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()的完成函数开始下一次迭代。当你的计数器指向对象列表的末尾时，整个过程就结束了。

Answer 3

我建议不要依赖于特定时间，而是通过jQuery's .queue() method排队：

<子> fiddle

$('.row99').each(function(i,e){
    $('.lists').queue(function (n) {
        $(e).slideUp(1000)
            .queue(function (next) {
                $(this).insertAfter('.marker');
                next();
            }).slideDown(1000, n);
    });
});

这种方式的工作方式是每个动画按顺序排列在共享对象上。在这个例子中，我将所有内容排在.lists元素上。

n和next参数是.dequeue()回调，它们告诉队列继续前进到队列中的下一个项目。

在$('.lists').queue(...内，您可以看到我选择使用其他queue来电，而不是将complete回调传递给slideUp。这是因为回调参数导致"Arrow Code"，尤其是当回调中存在回调时。

以这种方式编码的优点是不依赖于动画的持续时间。您可以随意更改单个位置的持续时间，排队行为将继续按预期工作。

有许多方法可以解决订购问题。一个简单的方法是向移动的元素添加一个类，并在最后一个移动的元素之后定位所有后续元素（adeneo概述的相同内容）：

<子> fiddle

$('.row99').each(function(i,e){
    $('.lists').queue(function (n) {
        $(e).slideUp(1000)
            .queue(function (n) {
                $(this).insertAfter($('.marker, .moved').last()).addClass('moved');
                n();
            }).slideDown(1000, n);
    });
});

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

3 个答案: