为什么我鼠标移入宽高透明度会变，移出就不变了？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>chainMovement</title>
<link rel="stylesheet" type="text/css" href="../css/chainMovement.css">
</head>
<body>
<div id='chainMovement'>羊羊羊</div>
<script type="text/javascript" src="../js/chainMovement.js"></script>
</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(){
//取当前的值
var icur=0;
//用if判断属性
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr)));
//由于opacity的值是小数，需要用parseFloat转为小数值，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];
}
}
