js动画之简单运动二

透明度的变化

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画透明度</title>
	<style>
		.animation{
			background-color: green;
			height: 100px;
			 100px;
            filter:alpha(opacity:30);
            opacity: 0.3;
		}
	</style>
</head>
<body>
	<div id="test" class="animation">animation</div>
</body>
 <script type="text/javascript">
    window.onload = function(){
    	var test = document.getElementById("test"),
            timer = null,
            alpha = 30;
        test.onmouseover = function(){
            startAnimation(100);
        }

        test.onmouseout = function(){
            startAnimation(30);
        }

        function startAnimation (alphaTarget) {
            clearInterval(timer);
            timer = setInterval(function(){
                if (alphaTarget == alpha) {
                    clearInterval(timer);
                    return;
                };
                if(alphaTarget > alpha){
                    alpha += 1;
                    test.style.filter = 'alpha(opacity:'+alpha+')';
                    test.style.opacity = alpha/100;
                }else{
                    alpha -= 1;
                    test.style.filter = 'alpha(opacity:'+alpha+')';
                    test.style.opacity = alpha/100;
                }
            },100)
        }
    	
    }
 </script>
</html>

　　大家可以看到test.style.filter='alpha(opacity:100)'这个是IE的方式

test.style.opacity是DOM浏览器的方式。