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

嗯...遍历了每个li列表没有透明度变化，是怎么回事呢

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>透明度改变</title>
    <style type="text/css">
        
    	 ul li{
        list-style: none;
    		width: 100px;
    		height: 100px;
    		top: 0px;
    		background:purple;
    		filter:alpha(opacity:100);
    		opacity: 1;
        float: left;
        margin-right: 20px;
    	}
    </style>
</head>
<body>
      <div id="alpha">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
      </div>
      <script type="text/javascript">
      	window.onload=function(){
      		var alphas=document.getElementsByTagName("li");
          for (var i = 0; i < alphas.length; i++) {
            alphas[i].timer;
            alphas[i].opacity=100;
            alphas[i].onmouseover=function(){
              startMove(this,50);
            }
            alphas[i].onmouseout=function(){
              startMove(this,100);
            }
      	}
        // var timer=null;
        // var opacity=100;这里也应该为每个li列表单独设置否则会有bug
      	function startMove(obj,iTarget){
      		clearInterval(obj.timer);
      		obj.timer=setInterval(function(){
      		var speed=obj.opacity>iTarget?speed=-10:speed=10;
            	if (obj.opacity==iTarget) {
            		clearInterval(obj.timer);
            	}else{
            		obj.opacity+=speed;
            		obj.style.filter="alpha(opacity:"+obj.opacity+")";
            		obj.style.opacity=obj.opacity/100;
            	}
      		},30)
           
      	}
      </script>
</body>
</html>