如何在下一个开始之前等待一个 jquery 动画完成? [英] How to wait for one jquery animation to finish before the next one begins?

问题描述

我有以下 jQuery:

I have the following jQuery:

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

我的问题是两者同时发生.我希望 div2 动画在第一个动画完成时开始.我试过下面的方法，但它做同样的事情:

My issue is that both happen at the same time. I would like the div2 animation to start when the first one finishes. I've tried the method below, but it does the same thing:

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

如何让它等待第一个完成?

How can I make it wait for the first one to finish?

推荐答案

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

animate 有一个完整"的功能.您应该将第二个动画放在第一个的完整功能中.

animate has a "complete" function. You should place the 2nd animation in the complete function of the first.

示例 http://jsfiddle.net/xgJns/

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

这篇关于如何在下一个开始之前等待一个 jquery 动画完成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！