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

不能改变宽度，鼠标放上去，改变的还是透明度，大神求解！

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>getStyle-1</title>
   <style type="text/css">
*{margin: 0;padding: 0;border: 0;}
       ul li{
           list-style-type: none;
           margin: 10px;
           background-color: #2e9fdb;
           width: 200px;
           height: 100px;
           border: 1px solid red;
           filter:alpha(opacity:30);
           opacity: 0.3;
       }
   </style>
</head>
<body>
<ul>
   <li id="li1"></li>
</ul>
<script>
var li1=document.getElementById("li1");
   li1.onmouseover=function(){
       startMove(this,"width",400);
   };
   li1.onmouseout=function(){
       startMove(this,"width",100);
   };
   var timer=null;
//    alert(0.03*100)//3
//    alert(0.07*100)//7.000000000001
//    alert(Math.round(0.07*100))//7, 四舍五入取整
function startMove(obj,aTtr,iTarget){
       clearInterval(timer);
       timer=setInterval(function(){
           var iCur=0;
           if(aTtr=="opacity"){
               iCur=Math.round(parseFloat(getStyle(obj,aTtr))*100);
           }
           else{
               iCur=parseInt(getStyle(obj,aTtr));
           }

           var speed=(iTarget-iCur)/8;
           speed=speed>0?Math.ceil(speed):Math.floor(speed);
           if(iCur==iTarget){
               clearInterval(timer);
           }
           else{
               if(aTtr="opacity"){
                   obj.style.filter="alpha(opacity:"+(iCur+speed)+")";
                   obj.style.opacity=(iCur+speed)/100;
               }
               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];
       }
   }
</script>
</body>
</html>