Jquery plugins 在执行滑块动画时防止在外部控件上多次单击

我有一个滑块（使用液体滑块），我对其进行了一些修改，以（I）创建一些颜色转换，以及（ii）使用外部的prev/next箭头，这两个箭头都在滑块的插件代码之外运行

我已经有了运行滑块的过渡和箭头，但我无法阻止多次单击运行颜色过渡，即使滑块仍在幻灯片之间移动

我尝试过使用

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);
        });

slider插件允许向前调用和回调，我尝试在动画发生时设置一个var

滑动

，以防止箭头在var为真时执行任何操作，但不幸的是，时机不对——将

slideing

设置为true的回调函数在执行click处理程序之前没有执行

箭头的代码非常简单：

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

---

已经有几个问题与类似的问题有关，但正如前面提到的，我尝试了建议的解决方案，但运气不好。任何帮助都将不胜感激：）

测试：{没有看到相关的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
});

---

最后，我通过触发选项卡使用的

click

事件来管理它，而不是重复上一个/下一个箭头事件的代码（我从这里得到了这个想法）。我还重新实现了滑动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'));
    });

在自定义动画（与滑块插件的动画具有相同的持续时间）的回调中更改

滑动

，意味着我可以控制箭头和其他选项卡何时能够执行转换