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

这段代码哪里错了，为什么显示的宽度没有任何变化

目标效果：鼠标悬浮，宽度变宽，鼠标移出，宽度恢复，但是不知道代码哪里有问题，鼠标移动没有任何变化？

<!DOCTYPE html>
<html xmlns="http://">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"></meta>     
    <title>多物体运动</title>
    <link href="css/main.css" rel="stylesheet" />
    <style type="text/css">
       ul,li {
       	list-style: none;
       }
       ul li{
       	width: 200px;
       	height: 100px;
       	background: yellow;
       	margin-bottom: 20px;
        border: 2px solid red;
       }

    </style>

    <script>
    window.onload=function(){
    	var ali=document.getElementsByTagName('li');   
    	for(var i=0;i<ali.length;i++){
    		ali[i].timer=null;
    		ali[i].onmouseover=function(){      
    			startMove(this,400);           
    		}
    		ali[i].onmouseout=function(){      
    			startMove(this,200);
    		}
    	}
    }

    function startMove(obj,iTarget){            
    	clearInterval(obj.timer);  
    	obj.timer=setInterval(function(){
    		var icur=parseInt(getStyle(obj,'width'));
            var speed=(iTarget-icur)/8;
    		speed=speed>0?Math.ceil(speed):Math.floor(speed);
    		if (icur==iTarget) {
    			clearInterval(obj.timer);
    		}
    		else{
    			obj.style.width=icur+speed+'px';
    		}
    	},30)
    }

    </script>
</head>

<body>
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
</body>
</html>