JQuery animation queues for multiple elements

Question

This question is similar to this question about animation queues , but the answers in this thread are very specific and not easy to generalize.

In my web application, messages are communicated to the user (information fields, errors and warnings, etc.), outputting divusing, class="alert"for example:

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

A page can have any number of warnings, depending on what the user is doing.

I would like to use jQuery animation to display each of the warning boxes in sequence: as soon as one animation ends, the next starts.

The answers in this other question say use a callback, for example:

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

, , - .