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

Question

У меня есть несколько анимаций, которые я хочу выполнить на разных объектах в дом.

Я хочу, чтобы они происходили по порядку.

Я не хочу делать это так:

$('#first').show(800, function () 
{ $('#second').show(800, function () {...etc...});

Я хочу добавить все свои анимации (и интенсивные функции процессора) в какой-то объект очереди, который будет обеспечивать их последовательное выполнение.

Answer 1

Я не уверен, почему вы не хотите использовать метод, который вы описали. Если это чисто с организационной точки зрения, вам не нужно использовать анонимные функции

function showFirst() {
  $('#first').show(800, showSecond);
}

function showSecond() {
  $('#second').show(800, showThird);
}

function showThird() {
  $('#third').show(800);
}

function startAnimation() {
  showFirst();
}

Answer 2

Я только что использовал этот плагин, http://plugins.jquery.com/project/timers, на днях, чтобы сделать аналогичную вещь. Вы в основном перебираете все подходящие элементы dom и затем выполняете анимацию каждый раз, когда индекс * подсчитывает вашу миллисекунду.

Код был примерно таким:

HTML:

<div id="wrapper">
   <div>These</div>
   <div>Show</div>
   <div>In</div>
   <div>Order</div>
</div>

JQuery

$("#wrapper div").foreach( function(i) {
    i = i + 1;
    $(this).oneTime(800 * i, "show", function()  {
        $(this).show();
    });
});

Answer 3

Ознакомьтесь с документацией для эффектов jQuery. Материал о очереди должен делать то, что вам нужно.

Answer 4

Это также будет работать.

            $('#first').show(800);
            setTimeout("$('#second').show(800)", 800);
            setTimeout("$('#third').show(800)", 1600);
            setTimeout("$('#forth').show(800)", 2400);

Я знаю, что он не является чисто последовательным, но я считаю, что он облегчает чтение и позволяет создавать анимацию с большей гибкостью.

Примечание. Необходимо указать код, который вы хотите выполнить. Я не использовал двойные кавычки в предыдущем коде, но если бы вы это сделали, вы бы избежали их следующим образом.

            $('#first').animate({"width":"100px"}, 500);
            setTimeout("$('#second').animate({\"width\":\"100px\"}, 500)", 800);
            setTimeout("$('#third').animate({\"width\":\"100px\"}, 500)", 1600);
            setTimeout("$('#forth').animate({\"width\":\"100px\"}, 500)", 2400);

Обычно этого можно избежать, чередуя используемые вами кавычки, но хотя это стоило упомянуть.

ОБНОВЛЕНИЕ: вот еще один вариант, и также стоит проверить обещания jquery здесь

            $('#first').show(800);
            $('#second').delay(800).show(800);
            $('#third').delay(1600).show(800);
            $('#forth').delay(2400).show(800);