如何使用jQuery为CSS sprites制作动画

Question

我试图找到使用CSS sprites和jQuery复制12fps动画的最简单方法。

我在想使用setInterval（）所以每隔83.33毫秒就会加载下一个精灵。

我的问题是，我不知道该怎么做......

我在想，因为我的精灵名称是增量的，如：

mariohammerswing1.png 
mariohammerswing2.png 
mariohammerswing3.png
etc.

所以，如果我们能够以某种方式增加它，直到我们到达最后一个实例，在这种情况下是mariohammerswing5.png，它将循环回到开头。

如果我能弄清楚那部分，我准备好了！ ：）

有什么建议吗？

Answer 1

jquery有一个sprite专用插件

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

你可能会以某种方式对%（模数）应用一些技巧，但我认为这样更容易阅读。