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到达那里，但是仍然......

不是每次都改变背景图像的网址，也许是IE＆amp;如果页面上存在所有图像（绝对位于彼此之上），Safari会表现得更好，并且您分别调用了.show()和.hide()。

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

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

使用SetInterval＆amp; amp; JQuery自定义动画问题的setTimeout

1 个答案: