如何制作图片动画？

有一张a.png图片，上面有16×16像素的5帧，一开始的时候显示第一帧。
如何让鼠标移上去产生动画呢？

这个貌似用flash容易，你试试animate()函数，但是要连续运动的话，好像得用setTimeout()之类的核心函数吧

更改src属性

不过最好先做缓存，否则会很慢

var show;
var ii=0;
var jj=0;
$(".ani").mouseover(function(){
//console.log("in");
if(show){
clearInterval(show);
}
jj=$(".ani").index(this);
show=setInterval(ani_in,100);

}).mouseout(function(){
//console.log("out");
if(show){//如果鼠标移出比较快，来不及在if()中clearInterval，那么就在这里clearInterval
clearInterval(show);
}
jj=$(".ani").index(this);
show=setInterval(ani_out,100);

});

function ani_in(){
ii++;
if(ii>=4){
ii=4;
clearInterval(show);
}
$($(".ani")[jj]).css("backgroundPosition",(-52*ii)+"px"+" "+(-37*jj)+"px");
}
function ani_out(){
ii--;
if(ii<0){
ii=0;
clearInterval(show);
}
$($(".ani")[jj]).css("backgroundPosition",(-52*ii)+"px"+" "+(-37*jj)+"px");

}


html:
<ul style="float:left;list-style:none;">
<li><div class="ani" style="background-position:0px 0px;"></div></li>
<li><div class="ani" style="background-position:0px -37px;"></div></li>
<li><div class="ani" style="background-position:0px -74px;"></div></li>
</ul>


css:

.ani{
background: url(images/toolbar_animation_20090618.png) no-repeat ;
width: 52px;
height: 37px;
cursor: pointer;
}

上述代码对单张图片是没有什么问题的；但对于多张图片有问题（当鼠标快速从一张图片移入另一张图片时会使上一张图片动画禁止）

效果看http://www.google.com搜索栏下面的7个彩色点。