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

回答