JQuery анимационные очереди по нескольким элементам

Question

Этот вопрос похож на этот вопрос об очередях анимации , но ответы в этой теме очень специфичны и не так легко обобщаются.

В моем веб-приложении сообщения передаются обратно пользователю (информационные поля, ошибки и предупреждения и т. Д.) Путем вывода 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

Настроить достаточно просто:

// 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();
});

Вы могли бы, вероятно, сделать из этого простой метод плагина, если вы будете часто его использовать.

Answer 2

Я нашел решение, хотя у меня появляется подозрение, что у кого-то, кто знает больше о замыканиях 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
            }
        )
    ;
}