jquery队列问题第二部分

Question

我又有麻烦了..。

 $(".menu-container").animate({top:"25px"},
 function() {
     $(".menu-container").animate({top:"-900px"});
     $(".windows-container").animate({top:"-730px"});
 }); 
 $(".menu-container").hide(function(){
     $(".webPageFrame").attr("src","");                
     addMenuButtons('main-menu',MenuTitleMain);

     addLastMenuButtons('last-menu','Login');

     menuBordersAndCorners('main-menu');
     lastMenuBordersAndCorners('last-menu');
 });
      $(".menu-container").show();
      $(".menu-container").animate({top:"0px"});

我认为最后两行没有执行..我还没有看到.menu容器，也没有动画到top:0px；

Answer 1

在此部分中：

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

在.animate({top:"0px"});已经在底部排队之后，您正在排队.animate({top:"-900px"});，您需要在此之前将其放到队列堆栈中，如下所示：

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

目前的情况是这样的：

1. .menu-container开始为top: 25px
2. .menu-container animation`
3. When queues top: 0px .menu-container制作动画完成动画制作到top: 25px it ，然后queues top: -900px动画。

因此，结果是它的动画效果是25，0，然后是-900，因为项目插入到队列中的顺序。我仍然不确定hide()和show()顺序是不是您想要的，但这就是您看不到元素的原因，它最终显示在窗口上方900px处:)

更新:基于评论的，我认为这更接近你想要的：

$(".menu-container").animate({top:"25px"}, function() {
     $(".windows-container").animate({top:"-730px"});
 }).animate({top:"-900px"}, function(){
     $(".webPageFrame").attr("src","");                
     addMenuButtons('main-menu',MenuTitleMain);
     addLastMenuButtons('last-menu','Login');
     menuBordersAndCorners('main-menu');
     lastMenuBordersAndCorners('last-menu');
 }).animate({top:"0px"});

.hide()和.show() (当没有给出大于0的持续时间时)不会排队，所以一旦900px离开视图，immediately...this就会做这项工作。