jQuery的排队与不同元素的动画问题

HTML

... 
<div id="content" class="home-layout clearfix"> 
    <section class="home-related"> 
     ... 
    </section> 
    <section class="search"> 
     <div class="left"> 
      <div class="panel"> 
       ... 
      </div> 
     </div> 
     <div class="right"> 
      <a class="someclass" href="#">CLICK</a> 
     </div> 
    </section> 
</div> 
...

... 
setupPanel : function() { 
    var $container = $("#content"), 
     $toHide = $("#content section.home-related"), 
     $toShow = $("#content div.left"), 
     $toShowContent = $('#content div.left div.panel'), 
     widthOpen = '602px', 
     positionOpen = '-600px', 
     widthClose = '30px', 
     positionClose = '0', 
     durationSlide = 300, 
     durationFade = 300; 


    if(MyApp.vars.searchAperto == false){ 
     MyApp.vars.searchAperto = true; 
     //ANIMATION ONE 
     $toHide.fadeOut(durationFade, function(){ 
      $toShow.animate({ 
       width: widthOpen, 
       left: positionOpen 
       }, durationSlide, function(){ 
        $toShowContent.fadeIn(durationFade); 
      }); 
     }); 
    }else{ 
     MyApp.vars.searchAperto = false; 
     //ANIMATION TWO 
     $toShowContent.fadeOut(durationFade, function(){ 
      $toShow.animate({ 
        width: widthClose, 
        left: positionClose 
       }, durationSlide, function(){ 
        $toHide.fadeIn(durationFade); 
      }); 
     }); 
    } 
}, 
...

一切工作。如果我点击“点击”，“动画ONE”正确执行;在动画结束时，如果我再次点击“CLICK”“ANIMATION TWO”正确执行;如果我在点击“点击”时动画一会儿（或者动画二会去），一切都会搞砸......我想要的行为是，如果点击“点击”而动画是继续，动画继续走下去，直到他结束，然后，其他动画开始，如果我再次点击相同的行为，等等...基本上我想有一个队列：anim one，anim two，anim一个等等...取决于我的点击次数。

我尝试使用应用于$容器的.queue（）和.dequeue（）方法，但没有成功;我不能告诉在点击我的应用程序应该把动画在队列中，不履行...

请帮助我，我变得疯狂：d

来源

2011-03-25 Giovanni

我看到你拿了使用.queue()的方法在$container这实际上是一个非常好的解决这个问题的方法。希望你只是有问题understanding .queue()和该代码会为你工作：

$container.queue(function(next) { 
    // I moved this if to inside of the queue, this way 
    // even if you click 3 times, it will hide/show/hide 
    if(MyApp.vars.searchAperto == false){ 
     MyApp.vars.searchAperto = true; 
     //ANIMATION ONE 
     $toHide.fadeOut(durationFade, function(){ 
      $toShow.animate({ 
       width: widthOpen, 
       left: positionOpen 
       }, durationSlide, function(){ 
        // note, the final callback on fadeIn will call the "next" 
        // function in the "queue" 
        $toShowContent.fadeIn(durationFade, next); 
       }); 
      });  
     }); 
    }else{ 
     MyApp.vars.searchAperto = false; 
     //ANIMATION TWO 
     $toShowContent.fadeOut(durationFade, function(){ 
      $toShow.animate({ 
       width: widthClose, 
       left: positionClose 
      }, durationSlide, function(){ 
       // again call next from callback of last anim in the chain 
       $toHide.fadeIn(durationFade, next); 
      }); 
     }); 
    } 
});

jQuery的使用将自动启动，这样你就不需要惹.dequeue()在所有的默认队列。队列函数的第一个参数将为next-将使下一个队列函数出列的函数，因此您可以使用next()将队列推进到下一个步骤。

来源

2011-07-19 18:39:29 gnarf

jQuery的排队与不同元素的动画问题

回答

相关问题