如何在我的第一个jQuery动画完成后才触发第二个jQuery动画？

我有一个链接激活这个小动画（$control1）。当你点击那个按钮时，表头下降，.area2 div显示淡入效果。如何在我的第一个jQuery动画完成后才触发第二个jQuery动画？

有没有办法等到标题失效，然后用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);} 
); 
});

来源

2011-03-09 Pennywise83

使用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/

来源

2011-03-09 23:13:48

当然，你就应该能够做到这一点：

$(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); }); 
    } 
); 
});

来源

2011-03-09 23:13:41

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

见

来源

2011-03-09 23:17:46

如何在我的第一个jQuery动画完成后才触发第二个jQuery动画？

回答

相关问题