0

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 flicker.

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 :)

1
  • That was the first thing I did, but the quality SUCKS with gif. I'm trying to move away from Flash as well so the animation works in none flash devices. I can't wait for apng.
    – yanike
    Sep 22, 2011 at 21:29

1 Answer 1

1

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.

3
  • Good answer! I was going to try messing the Z-Order. Thanks. This way I can keep the PNGs and they can blend in with any background I choose if I need to change the site for any reason.
    – yanike
    Sep 22, 2011 at 21:44
  • ah yes, the z-order is the same basic idea =). Good luck!
    – Chazbot
    Sep 22, 2011 at 21:47
  • Thanks I found another way of doing it with CSS Display: None & Block.
    – yanike
    Sep 22, 2011 at 22:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.