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

為什么我鼠標(biāo)移入寬高透明度會(huì)變，移出就不變了？

<!DOCTYPE html>

<html>

<head>

<title>chainMovement</title>

</head>

<body>

</body>

</html>

*{
	margin:0;
	padding:0;
}
#chainMovement{
	width:?200px;
	height:?100px;
	background:?red;
	position:?relative;
	font-size:?12px;
	filter:alpha(opacity:30);
	opacity:?0.3;
	border:?1px?solid?black;
}

window.onload=function()?{
	var?chainMovement=document.getElementById('chainMovement');
	chainMovement.onmouseover=function()?{
		starMove(chainMovement,'width',400,function()?{
			starMove(chainMovement,'height',200,function()?{
				starMove(chainMovement,'opacity',100);
			})
		})
	}
	chainMovement.onmouseout=function()?{
		starMove(chainMovement,'opacity',30,function()?{
			starMove(chainMovement,'height',100,function()?{
				starMove(chainMovement,'width',200);
			})
		})
	}
}
function?starMove(obj,attr,iTarget,fn){
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
	//取當(dāng)前的值
	var?icur=0;
	//用if判斷屬性
	if(attr=='opacity'){
		icur=Math.round(parseFloat(getStyle(obj,attr)));
	//由于opacity的值是小數(shù)，需要用parseFloat轉(zhuǎn)為小數(shù)值，Math.round四舍五入
	}else{
		icur=parseInt(getStyle(obj,attr));
	}
	//算速度
	var?speed=(iTarget-icur)/8;
	speed=speed>0?Math.ceil(speed):Math.floor(speed);
	//檢測停止	
	if(icur==iTarget){
		clearInterval(obj.timer);
		if(fn){
			fn();
		}
	}else{
		if?(attr=='opacity')?{
			obj.style.filter='alpha(opacity:'+icur+speed+')';
			obj.style.opacity=(icur+speed)/10;
		}else{
			obj.style[attr]=icur+speed+'px';
			}	
		}
	},30);
}
function?getStyle(obj,?attr)
{
?if(obj.currentStyle)
?{
??return?obj.currentStyle[attr];
?}
?else
?{
??return?getComputedStyle(obj,?false)[attr];
?}
}