使用 SetInterval 和 JQuery 自定义动画问题设置超时时间

Question

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

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

这是未压缩的 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，也许 IE 和如果页面上存在所有图像（绝对位于彼此之上），并且您分别调用了 .show() 和 .hide()，Safari 的性能会更好。

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

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