jQuery ждать окончания первой анимации до начала следующего

Question

Необходимо, чтобы элементы DOM замирали один за другим с помощью jQuery, очевидно, мне нужен цикл, поскольку у меня есть 20 элементов, я не знаю, как правильно сделать цикл в jQuery, поэтому Я сделал следующее.

Однако обратный вызов не работает должным образом, все элементы исчезают в одно и то же время, он должен дождаться завершения первой анимации и только затем запустить animate_element().

Если есть лучший способ сделать это, я бы хотел знать об этом, однако я также задаюсь вопросом, почему ниже код не работает?

$('div').css("display", "none"); 
$('div').addClass("needs_animation"); 

function animate_element(){ 
    if ($("div[class='needs_animation']:first").length) { 

     $("div[class='needs_animation']:first").removeClass("needs_animation"); 

     $("div[class='needs_animation']:first").fadeIn(2000, animate_element()); 

    } 
} 

animate_element(); 

Пример: http://jsfiddle.net/m7PWT/1/

EDIT: Фиксированные благодаря ответ John S, однако я использовал свой собственный код, даже если его производительность не лучше, так как его более ясным для меня на данный момент.

$('div').css("opacity", "0"); 
$('div').addClass("needs_animation"); 

function animate_element(){ 
    if ($("div[class='needs_animation']").length) { 

     $("div[class='needs_animation']:first").animate({opacity:1}, 100, function() { 
      $("div[class='needs_animation']:first").removeClass("needs_animation"); 
      animate_element() 
     }); 

    } 
} 

animate_element(); 

Работа скрипку

Answer 1

Вы были очень близки с тем, что у вас было. У вас только две ошибки:

(1) Вы должны сохранить значение $("div[class='needs_animation']:first") в переменной. Мало того, что это более эффективно, но в этом случае вы не хотите повторно выполнять это после удаления класса, потому что вы получите другой результат.

(2) Когда вы поставили функцию обратного вызова на .animate(), вы не должны были включать в себя круглые скобки. Вы на самом деле называли это.

Вот что код может выглядеть следующим образом:

$('div').css("opacity", "0"); 
$('div').addClass('needs_animation'); 

(function animate_element(){ 
    var $div = $('div.needs_animation:first'); 
    if ($div.length) { 
     $div.removeClass('needs_animation'); 
     $div.animate({ opacity: 1 }, 2000, animate_element); 
    } 
})(); 

jsfiddle

И еще одна вещь: При выборе элементов по классам, используйте 'div.needs_animation', а не 'div[class="needs_animation"]'. Первые будут работать, даже если элементы имеют более одного класса.