jQuery动画不流畅

时间:2012-04-12 08:15:20

标签: jquery scroll easing

如上所述,我的页面流动性有问题,我认为jquery在某种程度上有所涉及。

我创建了以下单页网站。

http://cgeese.de/tests/Test02/

我在js插件中使用jQuery

问题

单击链接会以弹跳缓动(由easing.js提供)将页面滚动到目标div。它在技术上工作正常,但它不够平滑我的口味。

我认为缓和中的口吃问题是我滥用其中一个插件但我似乎无法在代码中发现错误。

问题

为什么动画口吃?我怎样才能让它更流畅?

更新 有任何线索吗?似乎使用jQuery-build-in缓存看起来好一点,但是有同样的问题。所以我猜这不是宽松插件,这让Ariel Feslers留下了一些东西。有没有像他这样的插件?

1 个答案:

答案 0 :(得分:4)

在铬上看起来很流畅。改变宽松类型不会有太大变化......

您的导航是位置:固定,导致每个导航关键帧的整页重绘/重排的原因。你可以用chrome canary或这个技巧来形象化这个:http://paulirish.com/2011/viewing-chromes-paint-cycle/

动画滚动也会触发重绘。同时删除尽可能多的CSS3阴影和渐变,它们很难为浏览器设置动画。

我认为firefox有一个插件。

你可以优化我的设置它的位置:绝对,并将你的内容放在一个隐藏溢出的div ...(某种假身体)

以下是一篇关于它的优秀文章:http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

你可以做的另一件事是不动画滚动但是它自己的元素,将它们放在一个绝对定位的元素中,并为这个元素设置动画。

有关重绘/回流的一般指导原则:https://developers.google.com/speed/articles/reflow