为什么在chrome中使用jquery animate（）时动画不一致？

Question

我使用jQuery（v2.1.1）animate()来转换height属性。

在FF 30中，动画始终流畅，但在Chrome 35/38中，它的即时〜50％的时间。

我注意到，当发生这种情况时，jQuery动画＆＃34;定时器被解雇＆＃34;事件在开发工具时间轴中聚集在一起（见图）。

为什么会发生这种情况？如何解决？

请注意，根据时间轴，动画保持低于60fps的阈值。

Answer 1

为什么不考虑使用CSS transitions而不是jQuery的animate功能？我认为，这会给你更好的表现。

此外，您应该考虑执行CSS scale transform，而不是为height属性设置动画。在现代浏览器中，这几乎可以保证您正在寻找的60fps。

这里有一个小小的jsFiddle来演示如何通过CSS过渡操作scaleY属性：http://jsfiddle.net/XpD29/（注意：仅在Chrome 36上测试过这个）