                        課程
                    
                        /前端開發(fā)
                        
                            /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>

js應該沒問題，單個移上圖標動畫沒問題，但是一旦快速移動好像就會導致上一個的鏈式動畫終止，哪位大神可以幫忙告知一下，找了一下午了。謝謝了。