当滑块动画执行时，防止多次点击外部控件

我有一个滑块（使用液体滑块），我已经入侵了一些（i）创建一些颜色转换和（ii）使用外部前/后箭头在滑块的插件代码之外。当滑块动画执行时，防止多次点击外部控件

我已经有了转换和箭头来操作滑块，但即使滑块仍然在幻灯片之间移动，我也无法阻止多次点击运行颜色转换。

我试过使用return false和e.stopImmediatePropagation()无济于事。

这里是我的上一个/下一个箭头代码：

$('.arrows a') 
     .click(function(e) { 
      var link = $(this); 
      oldTab = $('.liquid-nav a.active'), newTab; 
      oldTab.removeClass('active').prev().animate({opacity: 0}, 1000); 
      if (link.hasClass('next')) { 
       if (oldTab.parent().next().length) { // Test for looping slides 
        newTab = oldTab.parent().next().find('a'); 
        newTabNum = theSlider.currentTab + 1; 
       } else { 
        newTab = $('.tab1').find('a'); 
        newTabNum = 0; 
       } 
       console.log(newTabNum); 
       theSlider.setCurrent(newTabNum); 
      } else { 
       if (oldTab.parent().prev().length) { // Test for looping slides 
        newTab = oldTab.parent().prev().find('a'); 
        newTabNum = theSlider.currentTab - 1; 
       } else { 
        newTab = $('.tab' + theSlider.panelCount).find('a'); 
        newTabNum = theSlider.panelCount - 1; 
       } 
       console.log(newTabNum); 
       theSlider.setCurrent(newTabNum); 
      } 

      newTab.addClass('active').prev().animate({opacity: 1}, 1000); 
      $('.liquid-nav').animate({borderTopColor: newTab.attr('data-colour')}, 1000); 
      $('.arrows a').animate({backgroundColor: newTab.attr('data-colour')}, 1000); 
     });

滑块插件允许callforward和回调，我试图设置一个VAR sliding，而动画是为了防止箭的发生当var是真的时候做任何事情，但不幸的是时机不对 - 在执行点击处理程序之前将sliding设置为true的callforward没有做到这一点。

代码为箭头很简单：

<div class="arrows"> 
    <a href="javascript:;" class="prev"></a> 
    <a href="javascript:;" class="next"></a> 
</div>

已经有这涉及到类似问题的几个问题，但提到我尝试了解决方案，而多少运气建议。任何帮助，将不胜感激:)

来源

2013-07-04 melat0nin

我设法它到底烧制由标签使用的click事件，而不是重复代码为prev/next箭头事件（我从这里得到了这个想法Controlling a slideshow with an external button）。我也重新实现了sliding var和它似乎工作：

$('.arrows a').click(function() { 
     if (!sliding) { 
      //console.log(sliding); 
      if ($(this).hasClass('next')) { 
       newTab = (theSlider.currentTab === (theSlider.panelCount-1)) ? newTab = 1 : theSlider.currentTab + 2; 
      } else { 
       newTab = (theSlider.currentTab === 0) ? (theSlider.panelCount) : theSlider.currentTab; 
      } 
      //console.log(newTab); 


      $('.liquid-nav .tab'+newTab+' a').click(); 
     } 
    });

的标签代码如下所示：

$('.liquid-nav a').each(function(i) { 
     $(this) 
      .click(function() { 
       if (!$(this).hasClass('active') && !sliding) { 
        $('.liquid-nav a.active').removeClass('active').prev().animate({opacity: 0}, 1000); 
        $(this).addClass('active').prev().animate({opacity: 1}, 1000); 
        $('.liquid-nav').animate({borderTopColor: $(this).attr('data-colour')}, 1000); 
        sliding = true; 
        $('.arrows a').animate({backgroundColor: $(this).attr('data-colour')}, 1000, function() { 
         sliding = false; 
        }); 
       } 
      }) 
      .prev().css('backgroundColor', $(this).attr('data-colour')); 
    });

在自定义动画的回调（具有相同的持续时间更改sliding滑块插件的动画）意味着我可以控制箭头和其他选项卡何时能够执行转换。

来源

2013-07-04 09:43:32 melat0nin

测试，也许：{没有看到相关的HTML代码}

$('.arrows a') 
    .click(function (e) { 
    //use selector relative to your slider, by default class liquid-slide 
    if ($('.liquid-slider').is(':animated')) return; 
    var link = $(this); 
    //... all other code here 
});

来源

2013-07-04 09:17:22

当滑块动画执行时，防止多次点击外部控件

回答

相关问题