为什么我的jQuery动画在基于Webkit的浏览器中不稳定? [英] Why are my jQuery animations choppy in webkit-based browsers?

问题描述

我正在制作一个非常简单的动画:向左滑动一排图像:

I'm working with a very simple animation: sliding a line of images to the left:

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

(应该是一个图片库；我隐藏了溢出内容，一次只能显示一张图片.)

(It's supposed to be an image gallery; I hide the overflow to show only one image at a time.)

尽管如此，尽管尝试了各种缓动参数，但即使在低速下，该动画在Chrome和Safari中也非常不稳定，但在Internet Explorer和Firefox中始终保持流畅. (大多数在线提出的问题都是关于 IE 或 Firefox 断断续续的！)

Anyway, despite trying various easing parameters, even at slow speeds the animation was very choppy in Chrome and Safari, but always smooth in Internet Explorer and Firefox. (Most issues raised online are about IE or Firefox being choppy!)

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

I found the cause, for me. It's a very special case that probably won't apply to most, but maybe it'll help someone regardless. I'll post my answer below. (The site guidelines allow this, I think.)

推荐答案

对我来说，如果是24位PNG，8位PNG，GIF，JPEG等，则没有什么区别.屏幕上的大图像显示我的动画有问题.如果您在大图片上方添​​加了z-index元素，请尝试将此CSS添加到您的元素中:

For me, it didn't make a difference if it was 24-bit PNGs, 8-bit PNGs, GIFs, JPEGs, etc., if there was a large image on the screen there were issues with my animations. If you have elements z-index'ed above a large image, try adding this CSS to your element:

-webkit-transform:translateZ(0);

-webkit-transform: translateZ(0);

对我来说，它奏效了，但是留下了动画伪像.

For me, it worked, but it left animation artifacts.

最终为我解决的是简单地更改此内容:

What finally solved it for me was to simply change this:

$('#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毫秒.

I just added a small 1 millisecond animation onto the beginning. My thinking was it would possibly "prep" Chrome for the real animation coming up, and it worked. You may want to change it to 20 or 50 milliseconds to be safe.

这篇关于为什么我的jQuery动画在基于Webkit的浏览器中不稳定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！