JQuery UI：弹跳动画排队但停止（）不起作用

Question

我正在使用JQuery UI的反弹动画：

$('.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)表示动画会在完成弹跳后停止，如下所示：

Answer 1

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

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

Answer 2

.stop()接受两个参数，两者都默认为false。

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

然后是param2或jumpToEnd - 它将立即完成动画。

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

Answer 3

是的，如果它只是......不使用两次，那么使用.stop（）停止（完成）和出列jQueryUI（但不是核心jQuery）动画是不可能的。 ：）

这只是一个＆＃34;技巧＆＃34;改变它的表现顺序。所以，试试这个：

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