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选择器来测试元素是否已经有动画正在进行中.如果是这样,请不要开始反弹:.is()

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