Дождитесь завершения jQueryanimation внутри цикла for

Question

У меня есть что-то вроде следующего кода

for(i=0, j=10; i<j ; i++){
    $('#an-element-'+i).fadeIn();
}

Как мне сделать так, чтобы каждая итерация в цикле начиналась только один раз fadeIn (); анимация завершена?

edit --- извините, плохо, я не включил 'i' в цикл

Answer 1

for циклы синхронны, но анимации асинхронны. Вам нужно будет использовать рекурсию.

var i = 0, j = 10;
(function fadeNext () {
    if (i < j) {
        $('#an-element-' + i++).fadeIn(fadeNext);
    }
}) ();

http://jsfiddle.net/uq9mH/

Answer 2

если у вас есть фиксированная задержка для всего предмета, вы можете использовать эту строку кода:

 $(this).fadeIn().delay(2000).fadeOut();

вместо

  $(this).fadeIn();

Answer 3

Вы можете выполнить код после анимации, поместив его в функцию, переданную в качестве параметра обратного вызова:

$("#foo").fadeIn("slow",function () {
  alert("done");
});

Но не совсем понятно, что вы пытаетесь сделать. Вы исчезаете один и тот же элемент 10 раз?

Answer 4

Попробуйте это:

for (i = 0, j = 10; i < j; i++) {
    $('.try').each(function() {
        $(this).delay(1000).fadeOut().delay(1000).fadeIn();
    });
}

Вы можете изменить продолжительность времени внутри функции задержки. Вот jsFiddle.

Answer 5

Согласно вашему коду, ваш цикл будет просто исчезать в одном и том же элементе 10 раз.

В любом случае, вам нужно поместить вызов в обратный вызов метода fadein: http://api.jquery.com/fadeIn/

Как-то так должно работать (не проверено)

var counter = 10;
function fadeIn(elem) {
   $(elem).fadeIn('slow', function(){
       if (counter > 0) {
          fadeIn(elem); //up to you how you figure out which element to fade in
       }
   });
   counter--;
}

//var elem = $('.something');
fadeIn(elem);