                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

js应该没问题，单个移上图标动画没问题，但是一旦快速移动好像就会导致上一个的链式动画终止，哪位大神可以帮忙告知一下，找了一下午了。谢谢了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图标</title>

<style type="text/css">
*{ margin:0; padding:0}
#odiv{ display:block; margin:0 auto; width:285px; height:225px; border:1px solid #C30; padding:20px}
a{ display:block; float:left; margin:10px; border:1px solid #C30;  text-decoration:none}
p{ padding:20px}
i{ position: relative; top:20px; left:22px;filter:alpha(opacity:100); opacity:1}
</style>

<script type="text/javascript" >
function startmove(obj, json ,fn){      
		 clearInterval(obj.timer);
		 obj.timer=setInterval(function(){
			 var ioffset=0;
			 var flag = true;
			 for(var attr in json){
		           if(attr!='opacity'){
		                 ioffset=parseInt(getStyle(obj,attr));
				   }
			       else{
				        ioffset=Math.round(parseFloat(getStyle(obj,attr))*100);
				    }
				//计算速度
			        var speed=(json[attr]-ioffset)/10;
			        speed=speed>0?Math.ceil(speed):Math.floor(speed);
			        if(json[attr]!=ioffset){
				           flag=false;
				           if(attr!='opacity')
						             {obj.style[attr]=ioffset+speed+'px';}
			              else{
				                     obj.style.filter='alpha(opacity:'+(speed+ioffset)+')';
				                     obj.style.opacity=(speed+ioffset)/100;}
			        }
					else{flag=true;}
			  }
			  if(flag==true){
				   clearInterval(obj.timer);
				   if(fn){fn();}
				}	
		 },10);
}

function  getStyle(obj,attr){
		if(obj.currentStyle)
		    {return obj.currentStyle[attr];}
		else
		    {return  getComputedStyle(obj,false)[attr];}
		}
</script>

window.onload=function(){
       var   odiv=document.getElementById('odiv'),
	            olist =odiv.getElementsByTagName('a');
		for( var i=0; i <olist.length ;i++){
			    olist[i].timer==null;
			    olist[i].onmouseenter=function(){
					oimg=this.getElementsByTagName('i')[0];
				    startmove(oimg,{'top':0,'opacity':0},function(){
						oimg.style.top="30px";
						startmove(oimg,{'top':20,'opacity':100})
						})
				}
				
			}
				
}
</script>
</head>
<body>
<div id="odiv">
          <a href="#"><i><img src="1.png" width="24" height="30"  /></i><p>话费</p></a>
          <a href="#"><i><img src="2.png" width="24" height="30"  /></i><p>时间</p></a>
          <a href="#"><i><img src="3.png" width="24" height="30"  /></i><p>机票</p></a>
          <a href="#"><i><img src="4.png" width="24" height="30"  /></i><p>写作</p></a>
          <a href="#"><i><img src="5.png" width="24" height="30"  /></i><p>定位</p></a>
          <a href="#"><i><img src="6.png" width="24" height="30"  /></i><p>音乐</p></a>
</div>
</body>
</html>