2

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

我创建了以下一页网站。

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

我将 jQuery 与 js 插件一起使用

  • 本地滚动
  • scrollto(均由 Ariel Flesler 提供,http ://flesler.blogspot.de/ )
  • 缓动(由 GSGD,http ://gsgd.co.uk/sandbox/jquery/easing/ )

问题

单击链接可将页面滚动到目标 div,并轻松反弹(由 easing.js 提供)。它在技术上工作得很好,但它对我的口味来说不够光滑。

我认为缓动中口吃的问题是我滥用了这些插件之一,但我似乎无法在代码中找到错误。

问题

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

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

4

1 回答 1

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

于 2012-04-12T08:26:23.810 回答