使用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动画（甚至用很少的调色板压缩）还是没有办法，我会尝试一种不同的方法。这可能比你值得的更麻烦;这个bug在Safari中并没有发生，我真的认为你可以用精心压缩的动画gif到达那里，但是...

而不是每次更改背景图像的URL，也许IE &如果所有图像都存在于页面上（绝对定位在另一页上），则Safari会更好，并且您分别称为.show()和.hide()。

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

通过这种方式，您可以确保在任何给定时刻总是有图像可见，并且没有闪烁。