Question

情况

我正在使用JQuery UI的effect()功能。效果的类型并不重要，但出于此问题的目的，我们可以使用"bounce"。单击链接时会调用此效果，因此我的完整示例代码如下：

$('#button').click(function (e) {
    e.preventDefault();
    $('#box').effect('bounce');
});

Here is a demo

问题

我遇到的问题，或者更多我想摆脱的行为，是当您快速连续多次点击链接时，它会将动画排队。（参见演示，快速点击链接10次，然后发布并观看它继续动画）

要求

我只是想阻止效果/动画排队。换句话说，如果框已经弹跳，我正在寻找被忽略的点击。无论如何我能做到吗？

失败的尝试

我已经做了一些研究，下面尝试了几种方法，但没有成功：

$('#box').stop().effect('bounce');

stop()在这种情况下似乎没有任何影响。

$('#box').clearQueue().effect('bounce');

clearQueue实际上是在效果不排队的意义上工作，但是会产生导致布局混乱的副作用。我假设这是因为它阻止效果将样式返回到其默认值。它也可能与使用fixed位置相关。

Answer 1

这应该可以解决问题。

$('#button').click(function (e) {
e.preventDefault();
if( !$('#box').is(':animated') ){ 
    $('#box').effect('bounce');
}
});

Answer 2

是的，你是对的，clearQueue在div中进行位置更改，但我尝试过这看起来像是在工作

$('#button').click(function (e) {
   e.preventDefault();

   if ($("#box").is(':animated')) {
       $('#box').effect = null
     }
   else { 
        $('#box').effect('bounce');
   }
});

js fiddle example

Answer 3

试试这个：

stop(true)

effect()会立即停止并清除队列，但在停止后，style会在完成后保留内联样式。他们只需要在之后删除。

这种方法的好处是点击感觉反应更快（因为没有更好的词）。该框似乎会对用户的点击做出快速反应。

但是，如果您无法在完成动画时简单地删除{{1}}属性，比如您之前已在对象上应用了内联样式，则可以事先对其进行缓存并在完成时重新应用它们，这是在this fiddle中展示。

希望这有帮助。

使用具有固定位置元素的{JQuery effect（）防止队列

3 个答案: