                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

我在做多目標聯(lián)動時為什么就會出錯？

根據(jù)《js動畫效果》課程中5-1節(jié)，我自己實踐了一下，發(fā)現(xiàn)如果只對單獨一個對象做動畫可以實現(xiàn)鏈式動畫效果，但一旦對多個對象（比如lis = getElementsByTagName("li")中的每個lis[i])添加動畫效果后，鼠標移動到對象上時就會出錯。瀏覽器調(diào)試錯誤截屏如下：

我的html代碼如下：

<!DOCTYPE?html>
<html>
<head>
	<meta?charset="UTF-8">?
	<title>分享欄js動畫</title>
	<script?type="text/javascript"?src="js/action.js"></script>

	<style?type="text/css">
		*{
			margin:?0;
			padding:0;
		}
		ul{
			margin-top:?30px;
			list-style:?none;
		}
		ul?li{
			width:?200px;
			height:?50px;
			background-color:?red;
			margin-bottom:?20px;
			border:2px?solid?#000;
			filter:alpha(opacity:30);
			opacity:?0.3;
		}
	</style>
	<script?type="text/javascript">
		window.onload?=?function(){
			var?lis?=?document.getElementsByTagName("li");
			var?li?=?document.getElementById("li");
			var?timer?=?null;//定義定時器
			var?alpha?=?0;
			/*li.onmouseover?=?function(){
				startAct(li,"height",100,function(){
					startAct(li,?"width",400);
				});
			}
			li.onmouseout?=?function(){
				startAct(li,"width",200,function(){
					startAct(li,?"height",50);
				});
			}*/
			for(var?i=0;?i<lis.length;?i++){
				//寬度/高度變化
				lis[i].timer?=?null;//為每個lis對象定義一個timer
				lis[i].onmouseover?=?function(){
					startAct(this,"height",100,function(){
						//alert(1);
						startAct(this,"width",400);
					});
				}
				lis[i].onmouseout?=?function(){
					startAct(this,"height",50);
				}
			}

		}

	</script>
</head>
<body>
	<ul>
		<li?id="li"></li>
		<li></li>
		<li></li>
	</ul>	
</body>
</html>

js代碼如下（js/action.js)：

function?startAct(obj,type,iTarget,fn){//obj指作用對象，type指被改變的屬性，ITarget指改變的目標值
	//初始化清除定時器
	clearInterval(obj.timer);

	var?speed?=?0;//定義速度
	obj.timer?=?setInterval(function(){
		if(type?==?"alpha"){//如果是透明度變化
			if(obj.alpha?>?iTarget){
				speed?=?-10;
			}else{
				speed?=?10;
			}
			if(obj.alpha?==?iTarget){
				clearInterval(obj.timer);
			}else{
				obj.alpha?=?obj.alpha+speed;
				obj.style.filter?=?"alpha(opacity:"+obj.alpha+")";
				obj.style.opacity?=?obj.alpha/100;	
			}
		}else{//如果不是透明度變化
			//獲取對象容器當前屬性的值
			var?oStyleValue?=?parseInt(getStyle(obj,type));
			//判斷速度正負情況下的取值
			speed?=?speed>0???Math.ceil((iTarget-oStyleValue)/5)?:?Math.floor((iTarget-oStyleValue)/5);
			//判斷對象是否運行到目標值
			if(oStyleValue?==?iTarget){
				clearInterval(obj.timer);
				if(fn){
					fn();
				}
			}else{
				obj.style[type]?=?oStyleValue?+?speed?+"px";				
			}
				
		}
	},30);
}

//獲取obj對象某屬性當前具體值
function?getStyle(obj,?type){
	if(obj.currentStyle){//IE瀏覽器
		return?obj.currentStyle[type];
	}else{//Firefox瀏覽器
		return?getComputedStyle(obj,false)[type];
	}
}