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

你可以.unbind() click事件一次点击，这将阻止它执行多次：

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

一旦动画完成，如果你需要能够再次点击，你可以重新绑定。

Answer 3

我通常解决此获得通过设置一个全局变量，如果像

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

Answer 4

运行可以在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事件绑定到li再次执行，最多可以执行一次。