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

Question

我有一个由链接($control1)激活的小动画.单击该按钮时,标题会下降,.area2div显示为fadeIn效果.

有没有办法等到标题下降然后用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/