jQuery GIF Animations

Question

I\'m looking to use jQuery to remove the need of using a GIF\'s to create a fairly simple animation.

What I want is an image to have four stages. 1) Nothing showing

Answer 1

If it's going to be constant and not event-driven, I'd recommend using gifs.

If, however, the animation is in response to something happening on the page, or if you only want it to start after everything is loaded, then jquery is probably the way to go.

You should just be able to change the image source (or the position offset if you're using a single image) to change the image. Have a look at some "pause" options in jQuery to delay changes between images.

Untested example (derived from Simon's answer in the link above):

function chg1() { $('#myimage').attr('src', ''); }
function chg2() { $('#myimage').attr('src', 'image1src.jpg'); }
function chg3() { $('#myimage').attr('src', 'image2src.jpg'); }
function chg4() { $('#myimage').attr('src', 'image3src.jpg'); }

function StartAnimation() {
    setTimeout(chg1, 2000);  // blank after 2 seconds
    setTimeout(chg2, 4000);  // img 1 after 4 seconds
    setTimeout(chg3, 6000);  // img 2 after 6 seconds
    setTimeout(chg4, 8000);  // img 3 after 8 seconds
    setTimeout(StartAnimation, 8000);  // start again after 8 seconds
}

StartAnimation();  // start it off