How to animate CSS sprites using jQuery

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 
mariohammerswing开发者_如何学Go3.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?

There's a sprite-dedicated plugin for jquery

http://www.spritely.net/

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.