使用 SetInterval 和 SetTimeout 的 JQuery 自定义动画问题

Question

我遇到的问题是 IE 和 Safari（Mac OS X 不是 Windows 版本）在动画期间闪烁图像，有时根本不做动画。 Google、Firefox 和 Opera 在加载后不会出现此问题。我认为它每次都重新下载图像导致闪烁。

这里是测试站点：http://www.yeoworks.cz.cc/otherdomains/theoasis/

这是未压缩的 JQuery 代码：

$(document).ready(function(){
//LOGO ANIMATION
setInterval( function(){
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr1.png)');
}, 0);
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr2.png)');
}, 200);
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr3.png)');
}, 300);
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr4.png)');
}, 400);
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr5.png)');
}, 500);
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr4.png)');
}, 600);
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr3.png)');
}, 700);
setTimeout(function(){
$('#logoani').css('background-image', 'url(ootr2.png)');
}, 800);
}, 900);
});

感谢您的帮助:)

Answer 1

如果动画 gif（即使是调色板压缩很少的）仍然无法解决问题，我会尝试另一种方法。这对你来说可能比它的价值更麻烦；这个错误在 Safari 中不会发生在我身上，我真的认为你可以通过精心压缩的动画 gif 到达那里，但尽管如此......

而不是每次都更改背景图像的 url，如果所有图像都存在于页面上（绝对彼此重叠）并且您调用 .show() 和 @987654322，IE 和 Safari 可能会执行得更好@分别。

我会将所有这些图像（或包含<img> 标签的jQuery 对象）存储在一个数组中，并通过setInterval 创建一个每100 毫秒运行一次的函数。当它运行时，.show() 数组中的“下一个”图像，同时将当前可见的图像告诉.hide()。

这样，您可以确保在任何给定时刻始终有图像可见，并且没有闪烁。