I am trying to find the simplest way to replicate a 12fps animation using CSS sprites and jQuery.

I was thinking using the setInterval() so every 83.33 millisecond, the next sprite will be loaded.

My problem, is that I don't know how to do that...

I was thinking, because my sprite names are incremental like:

mariohammerswing1.png 
mariohammerswing2.png 
mariohammerswing3.png
etc.

So, if we could somehow increment this until we reached the last instance, which in this case is mariohammerswing5.png it will loop back to the beginning.

If I can figure out that part, I'm ready to go! :)

Any suggestions?

I am trying to find the simplest way to replicate a 12fps animation using CSS sprites and jQuery.

I was thinking using the setInterval() so every 83.33 millisecond, the next sprite will be loaded.

My problem, is that I don't know how to do that...

I was thinking, because my sprite names are incremental like:

mariohammerswing1.png 
mariohammerswing2.png 
mariohammerswing3.png
etc.

So, if we could somehow increment this until we reached the last instance, which in this case is mariohammerswing5.png it will loop back to the beginning.

If I can figure out that part, I'm ready to go! :)

Any suggestions?

• javascript
• jquery
• timer
• css-sprites

• I think "sprites" usually indicate you have multiple frames on one image, in which case, all you'd have to do is pan the image. But anyway, why don't you just use an animated gif? Or do you want higher quality images? Flash is another option. – mpen Commented Aug 7, 2010 at 4:25
• @Mark: Maybe he wants to be able to start and stop the animation at will. – Deniz Dogan Commented Aug 12, 2010 at 10:25
• Animated gifs are garbage. 256 colours? Why are we still even using them? – devios1 Commented Apr 12, 2012 at 18:47

2 Answers 2

There's a sprite-dedicated plugin for jquery

http://www.spritely/

Take a look ;)

Untested, but something like this:

var images = ['one.png', 'two.png', 'three.ng'];

function startAnim() {
    var $target = $('#something');
    var counter = 0;
    setTimeout(function () {
        $target.css('background-image', images[counter]);
        if (++counter > images.length - 1)
            counter = 0;
    }, 83);
}

startAnim();

You could probably apply some trickery with % (modulo) somehow, but I think it's easier to read this way.