JQuery用户界面：弹跳动画排队，但停止（）不工作

$('.mydiv').mouseover(function() { 
     $(this).effect("bounce", { times:4 }, 300); 
});

和我有动画“排队”，如果我将鼠标悬停在他们的老问题（即：如果我快速将鼠标移动到div上4次，动画将在4次以后发生）。

通常我会用.stop()来对付它，例如：

$('.mydiv').mouseover(function() { 
     $(this).stop().effect("bounce", { times:4 }, 300); 
});

但在这种情况下它没有任何区别。有谁知道解决方案？

使用.stop(true)意味着动画停止不用其他完成反弹，像这样：

enter image description here

2012-08-07 MeltingDog

使用:animated selector和.is() method来测试元素是否已经有动画正在进行。如果是这样，不启动反弹：

$('.mydiv').mouseover(function() { 
    var $this = $(this); 
    if (!$this.is(":animated")) 
     $this.effect("bounce", { times:4 }, 300); 
});

2012-08-07 01:01:24 nnnnnn

谢谢招 – MeltingDog 2012-08-07 01:13:16

.stop()接受两个paramters，这两者默认为false。

还有param1或clearQueue - 它将从队列中清除其后面的所有其他动画，并将动画停止在其轨道中。

然后有param2或jumpToEnd - 这将立即完成动画。

如果您设置了.stop(true)它应该按预期工作。

2012-08-07 00:36:25 Ohgodwhy

感谢 - 但现在animtaion通过中途停，这意味着该图标停止不对齐。我附上上面的图片来演示 – MeltingDog 2012-08-07 00:42:42

，或许你想立即完成动画，然后，'.stop（false，true）;' – Ohgodwhy 2012-08-07 00:49:52

我很害怕添加，回到我的第一个方块 - 动画再次开始排队 – MeltingDog 2012-08-07 00:59:14

是的，这是不可能停止（完成）和出队jQueryUI的（但不是jQuery核心）动画与.stop（）如果只是......不使用两次。 :)

这只是一个“技巧”来改变它执行的顺序。所以，试试这个：

$('button').on('click', function(){ $(this).stop(false, true).stop(true, false).animate('bounce') });

2014-05-29 18:59:33 Jovian

回答