Question

我有一个简单的jQuery动画，可以在.click（）事件时向右或向左移动div。

但是，如果用户点击两次事件，则会触发两次，这会影响格式化。

以下是我所拥有的一个例子：

$('a#right').click( function () {

if ($(this).is(':visible')) {

    $('#slide').animate({right: '+=257'}, 400, function () {
    slide_button();
    });

    }
});

函数slide_button（）将检查div的位置是否在用户视点的可接受限度内。如果是这样，它将允许右或左按钮可见。如果它超出限制，它将隐藏按钮。

效果很好，除非我点击两次 - 然后它会直接滑出页面。

有没有办法解决此问题，忽略双击？

Answer 1

只需检查元素是否已经过动画：

$('a#right').click( function () {
    if ($(this).is(':visible') && !$('#slide').is(':animated')) {
        $('#slide').animate({right: '+=257'}, 400, function () {
            slide_button();
        });
    }
});

Answer 2

您可以在jquery中使用one()：

$('a#right').one("click", function () {
    slide($(this));
});

function slide(obj) {
    if (obj.is(':visible')) {
        $('#slide').animate({right: '+=257'}, 400, function () {
            slide_button();
            $('a#right').one("click", function () {
              slide($(this));
            }
        });
}

动画完成后，点击事件再次绑定到链接，最多可以执行一次。

Answer 3

我通常通过设置全局变量并运行if like

来解决这个问题

 clicked = true;
 $(div).click(function(){
   if (!clicked){
       clicked = true;
       Your function with a callback setting clicked to false
   }
   ....
 })

Answer 4

点击后可以.unbind()点击事件，这会阻止它多次执行：

$('a#right').click(function () {
    $(this).unbind('click');
    ...
});

动画完成后，如果您需要再次点击，可以重新绑定它。

jQuery动画：忽略双击

4 个答案: