为什么我的 jQuery 动画在基于 webkit 的浏览器中不稳定？答案

【问题标题】：Why are my jQuery animations choppy in webkit-based browsers?为什么我的 jQuery 动画在基于 webkit 的浏览器中不稳定？
【发布时间】：2012-01-22 11:15:08
【问题描述】：

我正在处理一个非常简单的动画：向左滑动一行图像：

$('#button').click(
    function() {
        $('div#gallery').animate({scrollLeft:'+=800px'}, 1000);
    }
);

（它应该是一个图片库；我隐藏了溢出以一次只显示一张图片。）

不管怎样，尽管尝试了各种缓动参数，即使速度很慢，动画在 Chrome 和 Safari 中非常不稳定，但在 Internet Explorer 和 Firefox 中始终流畅。（网上提出的大多数问题都是关于 IE 或 Firefox 不稳定！）

我找到了原因，对我来说。这是一个非常特殊的情况，可能不适用于大多数人，但无论如何它可能会对某人有所帮助。我将在下面发布我的答案。（我认为网站指南允许这样做。）

【问题讨论】：

是的，理想情况下，如果/当您解决自己的问题时，您将其发布在下方并“接受”您自己的答案...只要它是本网站的主题并且足够清晰以提供帮助未来的读者。我唯一的建议是您在上面的问题中发布一个示例和代码，以提供更多上下文。

标签： jquery google-chrome safari webkit jquery-animate

【解决方案1】：

对我来说，如果是 24 位 PNG、8 位 PNG、GIF、JPEG 等，这并没有什么不同，如果屏幕上有大图像，我的动画就会出现问题。如果您在大图像上方有元素 z-index，请尝试将此 CSS 添加到您的元素：

-webkit-transform: translateZ(0);

对我来说，它有效，但它留下了动画伪影。

最终为我解决的只是简单地改变它：

$('#myimage').animate({
    height: 0,
    top: '-=50'
}, 500, 'linear');

到这里：

$('#myimage').animate({
    height: '-=1'
}, 1, 'linear').animate({
    height: 0,
    top: '-=50'
}, 500, 'linear');

我只是在开头添加了一个 1 毫秒的小动画。我的想法是它可能会为即将出现的真正动画“准备”Chrome，并且它奏效了。为了安全起见，您可能需要将其更改为 20 或 50 毫秒。

【讨论】：

感谢加文。 -webkit-transform: translateZ(0);也解决了我的问题。感谢分享真的很有帮助。
+1，-webkit-transform: translateZ(0); 上的 9 个月仍然对我有帮助。谢谢。

【解决方案2】：

在我的例子中，问题不在于代码，而在于图像——特别是通过 css 宽度属性（强制）缩小的大图像。当然，较大的图像可能需要更多的处理来制作动画，但 IE 和 FF 似乎可以很好地按比例缩小它们（在我的例子中，2000px 宽的图像被缩放为 800px 宽）。与此同时，Chrome 和 Safari 似乎陷入了为此类图像制作动画的困境。一旦我在 Photoshop 中将我的所有图像批量缩小到实际上为 800 像素宽，动画到处都很流畅。

其他细节。我正在使用 jQuery 1.7。我遇到了为 img 元素本身以及带有背景图像的 div 元素设置动画的问题。

【讨论】：

超级老线程，我知道，但我在 Chrome 上遇到了同样的问题。问题是，我的图像是根据窗口大小动态缩放的。有什么建议吗？

【解决方案3】：

我意识到这个线程很旧，但是为了高效编码...，我最近遇到了一个类似的问题，即使用 Chrome 的动画断断续续，在寻找解决方案时，遇到了这个线程（但不是 FF 或 IE ) 使用 png 而不是 gif 将问题追溯到我的一个折叠图标（当我将 png 换成 gif 时），webkit 浏览器在生成流畅的动画时没有问题（但是一旦我将 png 换回，我的动画又一次断断续续……）

【讨论】：

你的 png 和 gif 有透明度吗？
它不是一个 8 x 8 的盒子（将折叠和展开图标描绘成一个矩形和正方形）
旧的还是新的，像这样的问题总是可以使用更多的解决方案。感谢您的加入。我当时正在使用 jpg，个人。