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

Question

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

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

(它应该是一个图像库；我隐藏了溢出以一次只显示一张图像。)

无论如何，尽管尝试了各种缓动参数，即使速度较慢，动画在 Chrome 和 Safari 中也非常不稳定，但在 Internet Explorer 和 Firefox 中总是流畅。 (网上提出的大多数问题都是关于 IE 或 Firefox 不稳定!)

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

Answer 1

对我来说，如果是 24 位 PNG、8 位 PNG、GIF、JPEG 等，没有什么区别，如果屏幕上有大图像，我的动画就会出现问题。如果您在大图像上方有 z 索引的元素，请尝试将此 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 毫秒。