为什么我的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-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毫秒以确保安全.

Answer 2

在我的情况下,问题不在于代码,而在于图像 - 特别是通过css width属性(强制)缩小的大图像.当然,较大的图像可能需要更多的处理动画,但IE和FF似乎处理它们只是精细缩小(在我的情况下,2000px宽的图像被缩放为800px宽).与此同时,Chrome和Safari似乎陷入困境,使这些图像变得生动.一旦我将我在Photoshop中的所有图像批量缩小到实际为800px宽,动画在任何地方都很流畅.

其他详情.我正在使用jQuery 1.7.我遇到了动画img元素本身的问题,以及带背景图像的div元素.