如何在mouseover和mouseout上使用Jquery進行相對動畫處理？

Question

我正在嘗試以下內容：

我的頁面底部有一個固定位置的div。 當鼠標進入和退出時，div將對其高度進行動畫處理以分別顯示。 100px和50px。 默認高度為50像素。

我發現Jquery僅通過一個大的禁忌就能正確地做到這一點。 當鼠標在動畫時退出，然后再次重新進入時：

a）堆疊動畫，從而完成很多（例如100個）動畫，而只需要一個。

b）重置當前動畫，這會導致意外行為，例如div消失，更改為固定高度，從而在100到50像素之間上下鎖定或上下移動。

有什么想法嗎？

Answer 1

處理鼠標懸停和鼠標移出事件時，應使用stop（）函數清除動畫隊列。 如果需要，它將使您跳到動畫的結尾（在開始另一個動畫之前）。 您還可以清除整個動畫隊列。

從jQuery API文檔中：

當需要在mouseenter和mouseleave上設置元素動畫時，.stop（）方法的有用性顯而易見：

<div id="hoverme">
  Hover me
  <img id="hoverme" src="book.png" alt="" width="100" height="123" />
</div>

通過將.stop（true，true）添加到鏈中，我們可以創建一個不錯的淡入淡出效果，而不會出現多個排隊動畫的常見問題：

$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});

Answer 2

而不是在每個動作上觸發動畫事件，而是具有一個不斷輪詢特定變量並據此采取行動的功能（通過移動或不移動某個（可變）量）的方式。 然后， mouseover和mouseout事件將修改被輪詢的那些變量，因此您不必擔心觸發數百個動畫。 如果我沒有道理，請告訴我，以便澄清。

Answer 3

到目前為止，我找到的唯一可行的解​​決方案是在動畫制作之前為mouseenter和mouseexit動畫都提供一個ClearQueue（），但是我認為在某些情況下這可能是不需要的。

在使用animate（）的情況下，效果很好，但是使用slideUp和其他默認JQuery動畫會導致不正確的行為。