浮动的父级会导致firefox8中的jquery性能停滞/滞后



如果这是一个已知的错误,我很抱歉,但我已经想了几个小时了(谷歌搜索和我自己的测试)。

  • 我有一个正在正确浮动的父容器。

  • 父容器由10个div组成,每个div包含一个h3和另一个div。单击时,会触发animate()事件并显示div。基本上是手风琴式的设置。

  • 我已经将性能断断续续/滞后缩小到浮动:对父容器上的css属性。

  • 删除此项会使事件变得平滑。

  • 但这样做破坏了我的布局。我还在safari 5.0、ie8和chrome中测试过它,当float:right打开时,所有事件都很顺利。Firefox是我唯一的问题。此外,使用slideToggle()给了我同样的滞后结果。这是firefox/jquery和float的已知问题吗?我正在使用当前的jquery库。

首先,使用谷歌翻译(来自俄语)阅读本文http://chikuyonok.ru/2010/11/optimization-story/

解决方案:

  1. 在设置动画之前,您需要(暂时)将浮动右侧样式转换为位置:绝对无浮动。也许您需要计算未来的div尺寸(高度/宽度),并在动画中使用它们。也许您需要在制作动画之前将固定高度设置为父对象。

  2. 动画绝对定位div

  3. 动画后,将位置:绝对样式转换回浮动:右

如果起点和终点静态位置不具有style属性(都在css类中),效果会更好。在这种情况下,要恢复标准样式,您只需要.removeAttr("样式")

最新更新