如何等待一個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/

有生有一個 「完整」 的功能。您應該將第二個動畫放在第一個動畫的完整功能中。

編輯：例如http://jsfiddle.net/xgJns/

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

Answer 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); 

Answer 3

不要使用超時，請使用完整的回調。

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

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

}); 

Answer 4

繼什麼kingjiv說，你應該使用complete回調鏈這些動畫。在第二個例子中，你幾乎已經有了它，除非你用括號跟着它執行你的ShowDiv回調。將其設置爲ShowDiv而不是ShowDiv()，它應該可以工作。

mcgrailm的回覆（貼在我寫這篇文章時）實際上是同樣的事情，只使用匿名函數進行回調。

Answer 5

$(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 6

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

這對我的作品。我不知道爲什麼你的原始代碼不起作用。也許它需要在匿名函數中存在？