Блог

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

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

#javascript #jquery #animation #callback #sequential

#javascript #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 имеет функцию «завершения». Вы должны поместить вторую анимацию в завершенную функцию первой.

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

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

Комментарии:

1. Не это ли я делаю во втором примере?

2. Ваш 2-й пример на самом деле близок. Удалите () из ShowDiv в первой строке. Вы вызываете функцию, а не передаете ее.

3. боже! Спасибо! Как бы я передал ему параметр, если бы мне это было нужно?

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

5. о, да, вам просто нужно было бы обернуть это в функцию, чтобы function(){ShowDiv('something')} это был третий параметр animage.

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

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

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

Ответ №5:

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

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

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

});

Ответ №6:

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

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