如何在我的第一個jQuery動畫完成後才觸發第二個jQuery動畫？

Question

我有一個鏈接激活這個小動畫（$control1）。當你點擊那個按鈕時，表頭下降，.area2 div顯示淡入效果。

有沒有辦法等到標題失效，然後用fadeIn效果顯示.area2？有了這個代碼，兩個動畫就可以同時運行。

$(document).ready(function(){ 

    $("#control1").toggle(
     function() { $("#header").animate({top:0}, 250); $(".area2").fadeIn(550);}, 
     function() { $("#header").animate({top:-82}, 250);$(".area2").fadeOut(550);} 
); 
}); 

Answer 1

使用complete回調函數是這樣的：

$(document).ready(function(){ 

    $("#control1").toggle(
     function() { $("#header").animate({top:0}, 250, function() {$(".area2").fadeIn(550);}); }, 
     function() { $("#header").animate({top:-82}, 250, function(){$(".area2").fadeOut(550);});} 
); 
}); 

在這裏閱讀的文檔：http://api.jquery.com/animate/

Answer 2

當然，你就應該能夠做到這一點：

$(document).ready(function(){ 

$("#control1").toggle(
    function() { $("#header").animate({top:0}, 250, function() { 
     $(".area2").fadeIn(550); }); 
    }, 
    function() { $("#header").animate({top:-82}, 250, function() { 
     $(".area2").fadeOut(550); }); 
    } 
); 
}); 

Answer 3

Yup：如果你添加一個函數作爲你最初調用01的最後一個參數動畫完成後它會被觸發。你可以把你的第二個動畫此功能：

$(document).ready(function(){ 
    $("#control1").toggle(
    function() { 
     $("#header").animate({top:0}, 250, function(){ 
     $(".area2").fadeIn(550); 
     }); 
    }, 

    function() { 
     $("#header").animate({top:-82}, 250, function(){ 
     $(".area2").fadeOut(550); 
     }); 
    } 
); 
}); 

見