鼠標自動重新調整大小div

Question

我正在嘗試自動重新調整鼠標上的一系列div的大小。效果雖然有效，但速度有點慢。任何提示將不勝感激。

$('#Main').delegate('div', 'mouseover', function() { 
    $(this).closest("div").animate({"height":"290px"}, 500).addClass("highlight").siblings().removeClass('highlight').animate({"height":"200px"},500); 
}); 

檢查搗鼓你的函數調用工作demo--

http://jsfiddle.net/dsnegi/y8LrT/

Answer 1

的 '500' 是你的時間間隔。 500是毫秒。減少這個以使其更快。但是，請記住，JS動畫的核心是一個「黑客」（我也使用它們，但我們可以稱之爲鏟子！）。您只需使用真正用於靜態佈局的渲染引擎在像素網格上調整時間間隔上的元素大小並重新定位元素。動畫的平滑度部分取決於計算機的速度和您使用的瀏覽器。

對於這種懸停效果，我會強烈考慮研究CSS3動畫，而不是更平滑，並且可以硬件加速。

Answer 2

我重寫了代碼.on()而不是.delegate()和我認爲它有點快。我還添加了一些.stop()函數來擺脫多餘的不必要的動畫，使其更加輕鬆和快速（動畫進行的速度應該更快）。您還可以調整動畫的持續時間，但我試圖通過性能使其工作更快一點，而不僅僅是更改我假設您選擇的參數。

http://jsfiddle.net/y8LrT/3/

Answer 3

真的很感激它。

嘗試過你的建議，但最適合我的是使用「mouseenter」而不是mouseover。

我已經更新了腳本http://jsfiddle.net/dsnegi/y8LrT/4/

歡呼