JQuery Custom Animation Issue using SetInterval & SetTimeout

The problem I'm having is that IE and Safari (Mac OS X not Windows Version) are flickering the images during animation and sometimes not doing the animation at all. Google, Firefox, and Opera don't this issue after load. I think it's redownloading the image each time to cause the flicke开发者_开发问答r.

Here's the test site: http://www.yeoworks.cz.cc/otherdomains/theoasis/

Here's the uncompressed JQuery Code:

$(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);
});

Thanks for helping :)

---

If an animated gif (even one with very little palette compression) still doesn't do the trick, I would try a different approach. This may be more trouble than it's worth to you; the bug doesn't happen for me in Safari, and I really think you can get there with a carefully compressed animated gif, but nonetheless...

Instead of changing the url of the background-image each time, perhaps IE & Safari would perform better if all the images existed on the page (positioned absolutely on top of one another), and you called .show() and .hide() respectively.

I would store all these images (or jQuery objects containing <img> tags) in an array, and create a function that runs every 100ms via setInterval. When it runs, .show() the 'next' image in the array, while telling the currently visible one to .hide().

This way, you can make sure that there's always an image visible at any given moment, and there's no flicker.