jquery - 跨多个元素的 jQuery 动画队列

Question

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

在我的 Web 应用程序中，通过输出 a 向用户报告消息（信息框、错误和警告等）div，class="alert"例如：

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

页面上可能有任意数量的警报，具体取决于用户的操作。

我想要的是使用 jQuery 动画顺序显示每个警报框：一旦一个动画结束，下一个动画就会开始。

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

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

除非要制作动画的 div 数量未知，否则这将不起作用。任何人都知道实现这一目标的方法吗？

Answer 1

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

nextAnim($('.alert'));

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

Answer 2

设置起来很容易：

// Hide all alert DIVs, then show them one at a time
$(function()
{
   var alerts = $(".alert").hide();
   var currentAlert = 0;
   function nextAlert()
   {
      alerts.eq(currentAlert).slideDown('fast', nextAlert);
      ++currentAlert;
   }
   nextAlert();
});

如果你会经常使用它，你可能会用它制作一个简单的插件方法。