jQuery动画跨多个元素排队

Question

这个问题类似于关于动画队列的问题,但该线程中的答案非常具体,不易推广.

在我的web应用程序,消息报告给用户(信息框,错误和警告等),通过输出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();
});

你可以用这个简单的插件方法制作一个简单的插件方法,如果它是你会经常使用的东西.