jQuery动画：忽略双击(jQuery animation: Ignore double click)

jQuery动画：忽略双击(jQuery animation: Ignore double click)

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

但是，如果用户点击两次该事件，则会触发两次，这会扰乱格式。

以下是我的一个例子：

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

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

它运行良好，除非我点击了两次 - 然后它会从页面上滑下。

有没有办法与此工作，以忽略双击？

I have a simple jQuery animation that moves a div to the right or left, upon a .click() event.

However, if the user clicks the event twice, it fires twice, which messes up the formatting.

Here's an example of what I have:

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

The function slide_button() will check to see if the position of the div is within acceptable limits for the user's viewpoint. If so, it will allow the right or left button to be visible. If it is outside of the limits, it will hide the buttons.

It works well, except if I click it twice--then it will just slide right off the page.

Is there a way to work with this to ignore double clicks?

最满意答案

只要检查元素是否已经具有动画效果：

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

Just check if element is already animating:

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