Как дождаться завершения одной анимации 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);
}

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

11
animation callback javascript jquery sequential

6 ответов

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

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

изменить: пример http://jsfiddle.net/xgJns/

$("#div1").animate({opacity:.1},1000,function(){
    $("#div2").animate({opacity:.1},1000);    
});​
21
$(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/

2

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

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

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

1

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

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

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

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

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

0