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元素。

Answer 3

我意识到这个线程已经过时了，但为了有效编码...，我最近遇到了类似的问题，使用Chrome的乱七八糟的动画，并在搜索解决方案时，遇到了这个线程（但不是FF或IE使用png而不是gif将问题跟踪到我的崩溃图标之一（只要我交换了gng的png）webkit浏览器没有产生平滑动画的问题（但是一旦我将png交换回来，我的动画再次波涛汹涌......）

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

3 个答案: