鼠标自动重新调整大小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/

欢呼