Как дождаться завершения анимации jquery до начала следующего?

У меня есть следующий 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);
}

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

Ответы

Ответ 1

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

animate имеет "полную" функцию. Вы должны поместить вторую анимацию в полную функцию первой.

EDIT: пример http://jsfiddle.net/xgJns/

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

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

Ответ 3

Вы можете передать функцию как параметр функции 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);

Ответ 4

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

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

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

});

Ответ 5

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

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

Ответ 6

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

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