另一個啓動時停止動畫功能

Question

有兩個不同的功能，一個用於mouseenter，另一個用於mouseleave。

第一個顯示塊，第二個隱藏它（都與動畫）。

問題是，mouseleave可以在動畫mouseenter完成之前啓動。

在這種情況下，塊閃爍數次。

我想停止mouseenter函數中的任何動畫，當mouseleave開始時。

如何做到這一點？

Answer 1

在每個動畫函數的前面放置一個.stop()。 E.g：

$(this).stop().slideDown(); 
$(this).stop().slideUp(); 

如果$(this)當前沒有動畫，.stop()就乾脆什麼也不做。

---

注：您可能會遇到與標準的幻燈片問題和.stop()使用時褪色功能 - 這些還記得上次高度/不透明的元素完全動畫來。因此，如果元素在.stop().slideUp()被調用之前僅達到50％的高度，則下一個.slideDown()將使其僅生成50％高度的動畫。在再次進入之前，通過快速移動鼠標來看到這種情況here。

jQuery文檔建議使用.stop(true, true)這會導致半完成的動畫跳轉到最終位置。這當然會造成難看的「閃光」。

我建議避免.slideUp()或.fadeIn()完全和設置特定的高度/阻動畫到，e.g：

$(this).stop().animate({height: 100}); 
$(this).stop().animate({height: 0}); 

看到這個演示：http://jsfiddle.net/Stwnv/。