Как анимировать CSS спрайты с помощью jQuery

Question

Я пытаюсь найти самый простой способ репликации анимации 12fps с использованием CSS-спрайтов и jQuery.

Я думал об использовании setInterval (), поэтому каждые 83,33 миллисекунды будет загружаться следующий спрайт.*

Моя проблема в том, что я не знаю, как это сделать ...

Я думал, потому что мои имена спрайтов являются инкрементными, как:

mariohammerswing1.png 
mariohammerswing2.png 
mariohammerswing3.png
etc.

Итак,если бы мы могли как-то увеличивать это, пока не достигнем последнего экземпляра, который в данном случае равен mariohammerswing5.png, он вернется к началу.

Если я смогу выяснить эту часть, я готов к работе!:)

Есть предложения?

Answer 1

Есть спрайт-плагин для jquery

http://www.spritely.net/

Посмотрите;)

Answer 2

Не проверено, но что-то вроде этого:

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();

Возможно, вы могли бы как-нибудь применить хитрость с % (по модулю), но я думаю, что так легче читать.