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

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

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