Запустить цикл jquery для итерации до завершения обратного вызова анимации? - PullRequest
Новая
       32

Запустить цикл jquery для итерации до завершения обратного вызова анимации?

3 голосов
/ 31 июля 2010

Я пытаюсь сделать последовательную анимацию, где цикл перебирает список элементов .post и медленно их затухает.Сложная часть заключается в том, что следующая итерация начинает исчезать до того, как последняя завершится.Все, что у меня есть, - это простой последовательный аниматор, который затемняет их один за другим. 

$(".post").hide();
var posts = $(".post"),
    i = 0;
(function() {
  $(posts[i++]).fadeIn('slow', arguments.callee);
})();

Кто-нибудь знает, как я могу изменить это, чтобы разрешить .post fadeIn () до предыдущего элемента /ы закончили?

Ответы [ 2 ]

5 голосов
/ 31 июля 2010

Итерируйте их, используя each() и используйте setTimeout() для каждого, умножая продолжительность анимации на текущий index в каждом. 

var posts = $(".post").hide();

  // Holds reference to the index of the current iteration
  // ------------------v
posts.each(function( index ) {
    var $th = $(this);
    setTimeout(function() {
        $th.fadeIn('slow');   // Removed arguments.callee
    }, index * 300);
});

Таким образом, каждый setTimeout()будет иметь продолжительность n*600, что даст вам нужный эффект.

Кстати, если вам не нужна переменная posts для каких-либо других целей, вы можете устранитьэто и цепочка .each() после .hide(), как в $(".post").hide().each(func...)

EDIT: У меня была ошибка.Я использовал this внутри setTimeout(), который имеет другое значение.Отредактировано, чтобы передать правильное значение.

РЕДАКТИРОВАТЬ: Неправильно прочитать вопрос.Изменена длительность с setTimeout() до 300, чтобы частично перекрывать анимации.

1 голос
/ 31 июля 2010

Аналогично решению Патрика, но, на мой взгляд, немного чище 

(function() {
  $(".post").hide().each(function(index){
    $(this).delay(index * 300).fadeIn('slow');
  });
})();

demo , 300 - это длительность задержки, где 'slow' - этодлительность угасания

...