javascript - JQuery UI：弹跳动画排队但 stop() 不起作用

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);
});

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

Using.stop(true)意味着动画在没有完成反弹的情况下停止，如下所示：

在此处输入图像描述

score 8 · Accepted Answer

使用带有方法的 :animated选择器来测试元素是否已经有动画在进行中。如果是这样，请不要开始反弹：.is()

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

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

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

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

3 回答 3