jquery队列问题

Question

$(".menu-container").animate({top:"25px"}); 
$(".menu-container").animate({top:"-900px"}); 
$(".windows-container").animate({top:"-730px"});

你好先生..我在jquery的队列中遇到了问题..我想做的是

$(".menu-container").animate({top:"25px"}); ----execute first then after this,

$(".menu-container").animate({top:"-900px"});          --this one and
$(".windows-container").animate({top:"-730px"});       --this one should execute at the same time.. 

我试过这个，但它不起作用..

$(".menu-container").queue(function(){
    $(".menu-container").animate({top:"25px"});
    $(".windows-container").animate({top:"-730px"});
    $(".menu-container").animate({top:"-900px"});
 });

---

Answer 1

你需要在前一个动画完成时启动每个动画，如下所示：

$(".menu-container").animate({top:"25px"}, function() {
    $(".menu-container").animate({top:"-900px"}, function() {
        $(".windows-container").animate({top:"-730px"});
    }); 
}); 

Answer 2

animate有一个回调函数，可用于在动画完成后执行操作

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});