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

Question

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

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

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

javascript jquery animation fadein sequential

3

Trip 31 Июл 2010 в 19:00

Answer 1

Обходите их, используя 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(), как в {{X3 }}

РЕДАКТИРОВАТЬ: у меня произошла ошибка. Я использовал this внутри setTimeout(), который имеет другое значение. Отредактировано для передачи правильного значения.

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

5

user113716 31 Июл 2010 в 15:35

Answer 2

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

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

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

1

Ties 31 Июл 2010 в 19:52

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

2 ответа

Похожие вопросы

Новые вопросы

javascript