jQuery动画:忽略双击

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

动画完成后,click事件再次绑定到链接,最多可执行一次.