Question

我试图在鼠标悬停时自动重新调整一系列div的大小。效果有效，但有点慢。任何提示将不胜感激。

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

检查小提琴的工作演示 -

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

Answer 1

函数调用中的'500'是您的时间间隔。 500是毫秒。减少这一点，使其更快。但是，请记住，JS动画的核心是“黑客”（我也使用它们，但让我们直言不讳！）。您只需使用真正适用于静态布局的渲染引擎，在像素网格上的时间间隔内调整元素大小和重新定位元素。动画的平滑度部分取决于您的计算机的速度以及您正在使用的浏览器。

对于这种悬停效果，我会强烈考虑研究CSS3动画，它们会更加平滑并且可以加速硬件。

Answer 2

我用.on()而不是.delegate()重写了您的代码，我认为它的速度要快一些。我还添加了一些.stop()函数来摆脱额外不需要的动画，使其更加流畅和快速（更少的动画应该更快）。您还可以调整动画的持续时间，但我尝试通过性能使其工作更快，而不仅仅是更改我假设您选择的参数。

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

Answer 3

真的很感激。

尝试了你的建议，但最适合我的是使用“mouseenter”而不是鼠标悬停。

我更新了脚本http://jsfiddle.net/dsnegi/y8LrT/4/

欢呼声

鼠标悬停时自动重新调整大小div

3 个答案: