没有插件的jQuery精灵动画切换

Question

这里我正在使用ascii字符进行类别切换。但我想把它变成一个精灵，就像这个：

问题是，我找不到一个简单的解决方案而没有下载外部插件，而且我也无法弄清楚如何检测字形（第一张或最后一张幻灯片）的状态，因为第一次点击我希望它从第一张到最后一张幻灯片，在第二次点击时关闭类别 - 从最后到第一张

Answer 1

试试这个

JS：

var timer;
var position=0;
var delay = 100;
var block = document.getElementById('image');

var moveBackground = function(){
    position = position - 20;
    if(position>100){
       position=0; 
    }
    block.style.backgroundPosition = position+"px 0px";
    mouseOver();
};

var mouseOver = function(){
   timer = setTimeout(moveBackground,delay);
};

var mouseOut = function(){
   clearTimeout(timer);
}

block.onmouseover= mouseOver;
block.onmouseout= mouseOut ;

CSS：

 .test {
    width:20px;
    height:20px;
    background:url(http://i.stack.imgur.com/vUWnE.png) no-repeat 0 0;
  }

我从here

复制了解决方案

Fiddle