How to animate CSS sprites using jQuery

Question

Hello, 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?

Answer 1

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.

Answer 2

There's a sprite-dedicated plugin for jquery

http://www.spritely.net/

Take a look ;)