JQuery ожидание анимации

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

Я хочу, чтобы они произошли в порядке.

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

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

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

Ответы

Ответ 1

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

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

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

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

function startAnimation() {
  showFirst();
}

Ответ 2

Просмотрите документацию для jQuery Effects. Материал о queueing должен делать то, что вам нужно.

Ответ 3

Я только что использовал этот плагин, 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();
    });
});

Ответ 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);

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

UPDATE: вот еще один вариант, и стоит также проверить jquery promises здесь

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