Как дождаться окончания одной анимации jquery до начала следующей?

Question

У меня есть следующий jQuery:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300 );
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);

Моя проблема в том, что оба происходят одновременно.Я хотел бы, чтобы анимация div2 запускалась, когда заканчивается первая.Я попробовал метод ниже, но он делает то же самое:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, ShowDiv() );
....
function ShowDiv(){
   $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
}

Как я могу заставить его ждать окончания первого?

Answer 1

http://api.jquery.com/animate/

animate имеет функцию «завершить».Вы должны поместить 2-ю анимацию в полную функцию первой.

РЕДАКТИРОВАТЬ: пример http://jsfiddle.net/xgJns/

$("#div1").animate({opacity:.1},1000,function(){
    $("#div2").animate({opacity:.1},1000);    
});​

Answer 2

$(function(){
    $("#div1").animate({ width: '200' }, 2000).animate({ width: 'toggle' }, 3000, function(){
    $("#div2").animate({ width: 'toggle' }, 3000).animate({ width: '150' }, 2000);
    });
});

http://jsfiddle.net/joaquinrivero/TWA24/2/embedded/result/

Answer 3

После того, что сказал kingjiv, вы должны использовать обратный вызов complete для цепочки этих анимаций. Это почти во втором примере, за исключением того, что вы немедленно выполняете обратный вызов ShowDiv, следуя за ним в скобках. Установите ShowDiv вместо ShowDiv(), и оно должно работать.

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

Answer 4

Не используйте тайм-аут, используйте полный обратный вызов.

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function(){

  $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);

});

Answer 5

Вы можете передать функцию в качестве параметра функции animate(..), которая вызывается после завершения анимации. Вот так:

$('#div1').animate({
    width: 160
}, 200, function() {
    // Handle completion of this animation
});

Пример ниже представляет собой более четкое объяснение параметров.

var options = { },
    duration = 200,
    handler = function() {
        alert('Done animating');
    };

$('#id-of-element').animate(options, duration, handler);

Answer 6

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function () {
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); });

Это работает для меня. Я не уверен, почему ваш оригинальный код не работает. Может быть, его нужно включить в анонимную функцию?