Question

这是我的fiddle。如您所见，我已经定义了一个简单的单击事件处理程序：

$('#traveller > a').click(function(e) {
    e.preventDefault();

    var $ul = $('#traveller ul');
    if($(this).hasClass('handle-next')) {
        if(Math.abs($ul.position().top - parentPadding) < totalHeight - itemHeight) {
            $ul.animate({top: '-=' + itemHeight});
        }
    }
    else {
        if($ul.position().top - parentPadding < 0) {
             $ul.animate({top: '+=' + itemHeight});
        }
    }
});

我注意到，当我快速点击双击时，按a.handle-next / a.handle-prev，ul位置意外更改。

我如何避免这种行为？

Answer 1

只需检查$ul是否已设置动画：

if($ul.is(':animated')) return;

DEMO

Answer 2

在执行事件处理程序的主体之前检查是否发生了动画。

if(!$ul.is(":animated")){
    if($(this).hasClass('handle-next')) {
        if(Math.abs($ul.position().top - parentPadding) < totalHeight - itemHeight) {
            $ul.animate({top: '-=' + itemHeight});
        }
    }
    else {
        if($ul.position().top - parentPadding < 0) {
            $ul.animate({top: '+=' + itemHeight});
        }
    }
}

工作示例 http://jsfiddle.net/A5u43/19/

Answer 3

您需要锁定旅行者的任何动作，直到完成动画。这里我使用了锁变量，但您可以使用任何方法来锁定它。为此目的，在animate上使用回调：

      $ul.animate({top: '-=' + itemHeight}, 400, 'swing', function(){
            lock = false;
        });

Here is the jsfiddle like

Answer 4

你可以用$ ul.stop（）来阻止它;就在你定义谁$ ul是

之前

这里是小提琴

var $ul = $('#traveller ul');
$ul.stop(true,true);

http://jsfiddle.net/A5u43/23/

摆脱双击效果

4 个答案: