jQuery单击功能,等待它再次启动之前完成?

时间:2012-11-02 16:35:58

标签: jquery

当我加倍/高音/等单击脚本运行的.next按钮时,我需要它们相互排队吗?我怎么能这样做才能在重新开始之前完成功能?

HTML

<ul id="one" class="first selected">
   <li class="pic_one"></li>
   <li class="pic_two"></li>
   <li class="pic_three"></li>                       
</ul>
<ul id="two">
   <li class="pic_one"></li>
   <li class="pic_two"></li>
   <li class="pic_three"></li>                        
</ul>
<ul id="three" class="last">
   <li class="pic_one"></li>
   <li class="pic_two"></li>
   <li class="pic_three"></li>                        
</ul>

的jQuery

$('.slider .next').click(function(){
   if($('.slider ul.selected').hasClass('last')){
      // leave blank
   } else {
      $('.slider ul.selected').hide('slide', { direction: "left" }, 1000);  
      $('.slider ul.selected').removeClass('selected');
      $('.slider ul').parent().next('ul').show('slide', { direction: "right" }, 1000).addClass('selected'); 
   }
});

2 个答案:

答案 0 :(得分:3)

类似于Rory的答案,但使用:动画伪选择器。这可以防止在动画元素时处理click事件。

$('.slider .next').click(function(){
   if($('.slider ul.selected').is(':animated')) return;

   if($('.slider ul.selected').hasClass('last')){
      // leave blank
   } else {
      $('.slider ul.selected').hide('slide', { direction: "left" }, 1000);  
      $('.slider ul.selected').removeClass('selected');
      $('.slider ul').parent().next('ul').show('slide', { direction: "right" }, 1000).addClass('selected'); 
   }
});

答案 1 :(得分:0)

如果我理解你的问题......你只是想阻止动画叠加多次点击。在调用下一个动画之前使用.stop()

示例:

$('.slider .next').click(function(){
   if($('.slider ul.selected').hasClass('last')){
      // leave blank
   } else {
      $('.slider ul.selected').stop().hide('slide', { direction: "left" }, 1000);  
      $('.slider ul.selected').removeClass('selected');
      $('.slider ul').parent().next('ul').stop().show('slide', { direction: "right" }, 1000).addClass('selected'); 
   }
});