JQuery очереди анимации

Question

Я зашел в тупик, поэтому надеюсь, что вы, гуру jQuery, можете помочь.

У меня есть 10 элементов (на самом деле маленькие изображения) на странице. Мне нужно анимировать их так:

1. первые 2 появляются
2. затем появляются следующие 2
3. затем появляются следующие 3
4. затем появляется следующая 1
5. затем появляются последние 2

Итак, я добавил атрибуты к каждому (sequence_num = "1" (или 2 или 3 и т. Д.), Чтобы я мог легко выбрать через $ (), какие из них анимировать, используя функцию animate ().)

Моя цель - написать функцию, которая выполняет анимацию (я могу это сделать - я думаю, что я понял функцию animate ()).

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

У кого-нибудь есть опыт с этим?

Answer 1

Избегайте огромной "рождественской елки" обратных вызовов или пытайтесь точно рассчитать время с помощью setTimeout.

var queue = [];

function show_next_in_queue() {
    if (queue.length > 0) {
        queue.shift().show(1000, show_next_in_queue);
    }
}

queue.push($("img.sequence1"));
queue.push($("img.sequence2"));
queue.push($("img.sequence3"));
queue.push($("img.sequence4"));
queue.push($("img.sequence5"));

show_next_in_queue();

Это запускает одну анимацию за другой и легко расширяется без вычислений в миллисекундах или кода, который исчезает с правой стороны экрана редактора.

Answer 2

$(function() {
        $('#start').click(function() {

            $('#first, #second').fadeIn(1000, function() {

                $('#third, #forth').fadeIn(500, function() {

                    $('#fifth, #sixth, #seventh').fadeIn(750, function() {

                        $('#eight').fadeIn(800, function() {

                            $('#ninth, #tenth').fadeIn('slow');

                        });
                    });
                });

            });

        });
    });

Answer 3

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