动画：jQuery与CSS：为什么jQuery滞后？- jsFiddle比较/示例

Question

3

我有一个例子，比较了jQuery和CSS执行的完全相同的动画。这个动画很小，没有太多变化，那么为什么jQuery会出现滞后呢？这太荒谬了...而CSS却表现得非常流畅。

有人能告诉我为什么即使是这么小的动画，jQuery动画也会出现滞后吗？

- android.nick

我猜测这是因为 jQuery 必须使用计时器和循环来修改 DOM 元素的内边距。CSS 是浏览器引擎的一部分。 - JohnP

此外，在您的动画调用中添加'backgroundColor': 'rgb(229, 243, 250)'是没有意义的。这不会被动画化。 - JohnP

如果你特指Safari的CSS转换效果，那么其中一个原因是它们在iOS（和OSX）设备上进行了硬件优化。 - DA.

我指的是webkit、firefox和opera浏览器。Safari在OSX设备上的优化程度与chrome一样。它们都运行webkit，只不过chrome做得更好一些。 - android.nick

2个回答

1

我认为这与paddingBottom与动画时间的比率有关。尝试将动画时间更改为较小的值，您会发现它更加流畅。

（设置为75毫秒 - link）

- Paul

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- methodofaction · Accepted Answer

在这个例子中，您必须删除由jQuery动画处理的div上的CSS过渡规则：

两者的行为都是相同的。

原因是jQuery通过每秒更改位置x次来进行动画处理，但浏览器随后试图在这些值之间进行动画处理。