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

前端之家收集整理的这篇文章主要介绍了为什么我的jQuery动画在基于webkit的浏览器中不稳定?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用一个非常简单的动画:将一行图像滑到左边:
$('#button').click(
    function() {
        $('div#gallery').animate({scrollLeft:'+=800px'},1000);
    }
);

(它应该是一个图像库;我隐藏溢出,一次只显示一个图像.)

无论如何,尽管尝试各种各样的宽松参数,即使速度很慢,Chrome和Safari中的动画也非常震撼,但在Internet Explorer和Firefox中始终保持平滑. (大多数在线提出的问题都是关于IE或Firefox正在爆炸!)

我找到原因,对我来说.这是一个非常特殊的情况,可能不适用于大多数,但也许它会帮助某人不管.我会在下面发布我的答案. (网站指南允许这个,我想.)

解决方法

对于我来说,如果它是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,'linear');

我刚开始添加一个小的1毫秒的动画.我的想法是,可能“准备”Chrome,使真正的动画出现,它的工作.您可能希望将其更改为20或50毫秒才能安全.

猜你在找的jQuery相关文章