停止當鼠標離開在JQuery中

Question

.hover動畫我有類似：

$('.test').hover(
function(){ 
    $(this).animate(...); 
}, function(){ 
    $(this).animate(...); 
} 
); 

但是如果用戶的鼠標在動畫完成之前離開，動畫繼續。如果我快速反覆快速懸停並取消該元素，則在鼠標離開元素後，動畫會重複幾次。如何在鼠標離開元素後停止動畫？

Answer 1

您正在尋找stop()：

$('.test').hover(
function(){ 
    $(this).stop(true).animate(...); 
}, function(){ 
    $(this).stop(true).animate(...); 
} 
); 

有兩種可選的布爾參數。第一個是clearQueue。如果設置爲false（或省略），則更像暫停動畫而不是停止動畫。下一次在該對象上開始動畫時，它將在繼續之前完成暫停的動畫和其他排隊動畫。在你的情況下，你希望它是true，它會告訴它實際上停止動畫並清除任何排隊的動作。

第二個可選參數是jumpToEnd。如果false（或省略），則動畫在其軌道上停止。如果true，它將跳轉到動畫結束時對象所在的狀態。您可能想要放棄這一個，但它取決於您正在做的動畫類型。

例如，假設您從0％不透明度到100％不透明度消失，並且在調用stop()時您的透明度爲75％，那麼您將調用淡入淡出到0％不透明度。如果沒有clearQueue，該對象將繼續衰減到100％，然後退回到0％。對於clearQueue，對象將以75％停止淡出，然後立即開始淡化回0％。如果jumpToEnd爲true，則該對象將立即從75％變爲100％不透明度，然後退回到0％。