跨多个元素的jQuery动画队列 [英] jQuery animation queues across multiple elements

问题描述

这个问题是类似<一个href=\"http://stackoverflow.com/questions/461912/jquery-finish-one-animation-then-start-the-other-one\">this一个约动画队列的，但在该线程的答案是非常具体的，而不是容易推广。

This question is similar to this one about animation queues, but the answers in that thread are very specific and not easily generalised.

在我的Web应用程序，消息报告给用户（信息框，错误和放大器;警告等）通过输出 DIV 与类=警报例如：

In my web application, messages are reported back to the user (info boxes, errors & warnings, etc) by outputting a div with class="alert" eg:

<div class="alert">Login successful</div>
<div class="alert">You have new messages waiting</div>

有可能是一个页面上的任何数目的警报，这取决于用户做了什么。

There could be any number of alerts on a page, depending on what the user does.

我想是使用jQuery动画以依次显示每个警报框：一旦一个动画结束，下一个开始

What I'd like is to use a jQuery animation to show each of the alert boxes sequentially: once one animation ends, the next one begins.

在其他问题的答案说，使用像一个回调：

The answers in that other question said to use a callback like:

$('#Div1').slideDown('fast', function(){
    $('#Div2').slideDown('fast');
});

如果有div的动画数目不详的不同之处在于

将不起作用。任何人都知道的一种方式来实现这一目标？

except that won't work if there's an unknown number of divs to animate. Anyone know of a way to achieve this?

推荐答案

我想出了一个解决方案，但我得到一个鬼鬼祟祟的怀疑，有人谁知道更多关于JS倒闭可能有一些指点我。

I came up with a solution, though I get a sneaking suspicion that someone who knows more about JS closures might have a few pointers for me.

nextAnim($('.alert'));

function nextAnim($alerts) {
    $alerts
        .eq(0)    // get the first element
        .show("slow",
            function() {
                nextAnim($alerts.slice(1));  // slice off the first element
            }
        )
    ;
}

这篇关于跨多个元素的jQuery动画队列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！