2011-03-09 99 views
1

我有一个链接激活这个小动画($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);} 
); 
}); 

回答

6

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

1

当然,你就应该能够做到这一点:

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

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

相关问题