跨多个元素的 jQuery 动画队列答案

【问题标题】：jQuery animation queues across multiple elements跨多个元素的 jQuery 动画队列
【发布时间】：2023-03-13 11:14:02
【问题描述】：

这个问题类似于this one about animation queues，但该线程中的答案非常具体，不容易概括。

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

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

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

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

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

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

如果要设置动画的 div 数量未知，这将不起作用。有人知道实现这一目标的方法吗？

【问题讨论】：

标签： jquery animation queue

【解决方案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
            }
        )
    ;
}

【讨论】：

【解决方案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();
});

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

【讨论】：