Question

我在点击事件中使用jQuery UI的Bounce Effect

$("#myelm").click(function(){
    $(".wlbutton").children("span.new").effect( "bounce", "slow");
});

我想只在它尚未运行时运行效果。因此，如果您快速点击两次，它将仅在第一次点击时起作用。我怎样才能做到这一点？

我试图用jQuery的.stop（）清除队列而没有任何运气。

Answer 1

您可以使用.not对其进行过滤：

$('#myelm').click(function(){
   $('.wlbutton').children('span.new').not(':animated').effect('bounce', 'slow');
});

但是，由于代码可读性，我会使用.is函数来检查而不是过滤器

Answer 2

使用:animated选择器检查特定元素是否为animating。如果它当前正在设置动画，请忽略该click事件。

尝试，

$("#myelm").click(function(){
    var xEle = $(".wlbutton").children("span.new");
    if(xEle.is(':animated')) { return; }
    xEle.effect( "bounce", "slow");
});

另一种方法是使用.stop()。

$("#myelm").click(function(){
    $(".wlbutton").children("span.new").stop().effect( "bounce", "slow");
});

仅在尚未运行jQuery UI时才运行动画

2 个答案:

DEMO