为什么缓慢的jQuery动画起伏不定？

我在谷歌搜索这个问题时遇到了困难，因为我能找到的大部分内容都是关于动画本来应该很快但行动缓慢的动画。我的问题是关于一个我希望持续时间长但仍然流畅的动画。

我已经创建了这个jsfiddle来演示这个问题： http ： //jsfiddle.net/93Bqx/

我试图让一个元素随着时间的推移慢慢移动到另一个位置。但动画非常不稳定。

基本上，它归结为这样的事情：

$elem.animate({ left: x, top: y }, someLargeNumber);

我想知道问题是动画是否太慢以至于每一步都小于一个像素，所以它将它们四舍五入为0或1使它看起来像是丢帧然后一次移动。但我不知道如何检查或解决这个问题。

有没有更好的方法来做慢动画，所以他们是顺利的？我有一个类似的用CSS3创建并且翻译（x，y）很顺利但不幸的是我需要比我认为可以用CSS获得更多的灵活性。

即使使用CSS过渡也不太顺畅。

我添加了Transit jQuery插件来测试CSS转换，它看起来几乎相同。

您的代码有一些小修复： http ： //jsfiddle.net/thirtydot/93Bqx/5/

相同的代码，但Transit添加： http ： //jsfiddle.net/thirtydot/93Bqx/6/ 。

我认为这是（大多数？）浏览器不进行子像素渲染这一事实的限制。正如你所提到的，在动画的每一步之后，元素的x和y都会被舍入，而这种舍入会导致难看的“摇晃”效果。

对于较少的病态测试用例，CSS转换版本确实看起来明显更好。阅读本文以获取更多信息： http ： //www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

我想这是以编程方式进行动画的不可避免的讨价还价。也许尝试一个专门用于动画的框架，如：

但是将动画调整为CSS最好。

我认为这与移动元素的频率有关。例如，如果您每秒移动一次对象，它将显得不连贯。尝试减少每次移动之间的时间量以及减少每次移动之间的距离。有关示例，请参见http://jsfiddle.net/2K9xP/ 。

所以我们……

 var duration = Math.round(10 * distance);

代替…

 var duration = Math.round(1000 * distance);