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

请问这段代码哪里错了？

原本的透明度为30的黄色方块，

要的效果是用JS使鼠标移入透明度到100，

鼠标移出透明度恢复到30，

可是我的效果是反的，移入30移出100，IE和chrome都是这样，这是哪里错了？

PS：我把box.onmouseover里的100和box.onmouseout里的30对调时是对的，不知道为什么

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度动画</title>
    <style type="text/css">
        body,div{
        padding:0;
        margin:0;
        font:normal 12px "微软雅黑"
        }
        #box{
            width:200px;
            height:150px;
            background-color: gold;
            top:0;
            left:20px;
            filter: alpha(opacity:30);
            opacity: 0.3;
        }
    </style>
    <script type="text/javascript">


        window.onload=function() {
            var box = document.getElementById("box");
            box.onmouseover = function(){startMove(100)};
            box.onmouseout =function(){startMove(30)};
        };
        var alpha=30,
             timer=null;
            function startMove(target){
                clearInterval(timer);
            var speed= 0;
            if(alpha>target){
                speed=-10;
            }else{
                speed=10;
            }
            timer=setInterval(function(){
                if(alpha==target){
                    clearInterval(timer);
                }else{
                    alpha+=speed;
                }
            },30);
            var box = document.getElementById("box");
            box.style.filter="alpha(opacity:"+alpha+");";
            box.style.opacity=alpha/100;
        }
    </script>
</head>
<body>
<div id="box"></div>
</body>
</html>