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

问题描述

这个问题类似于这个关于动画队列的问题，但该线程中的答案非常具体，不容易概括.

在我的 Web 应用程序中，通过输出带有 class="alert" 的 div 将消息报告给用户(信息框、错误和警告等)例如:

登录成功
<div class="alert">您有新消息在等待</div>

一个页面上可以有任意数量的警报，具体取决于用户的行为.

我想要的是使用 jQuery 动画按顺序显示每个警告框:一个动画结束后，下一个动画开始.

另一个问题的答案说使用回调，如:

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

除非要设置动画的 div 数量未知，否则这将不起作用.有人知道实现这一目标的方法吗?

解决方案

我想出了一个解决方案，尽管我偷偷怀疑那些更了解 JS 闭包的人可能会给我一些建议.

nextAnim($('.alert'));函数 nextAnim($alerts) {$警报.eq(0)//获取第一个元素.show("慢",功能() {nextAnim($alerts.slice(1));//切掉第一个元素});}

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

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.

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

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

解决方案

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屋！