                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

完成（透明度動畫）

<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <style type="text/css">
??????? #div1{
??????????? width:200px;
??????????? height: 200px;
??????????? background:red;
??????????? filter:alpha(opacity:30);/*IE9支持*/
??????????? opacity:0.3; /*支持css3的瀏覽器*/
??????? }
??? </style>
??? <title></title>
</head>
<body>
<div id="div1"></div>
</body>
<script type="text/javascript">
??? window.onload=function(){
??????? var odiv = document.getElementById("div1");
??????? odiv.onmouseover= function(){
??????????? startMove(100);
??????? };
??????? odiv.onmouseout= function(){
??????????? startMove(30);
??????? }
??? };
??? var timer = null;
??? var alpha = 30;
??? function startMove(iTarget){
??????? clearInterval(timer);
??????? var odiv = document.getElementById("div1");
??????? var timer = setInterval(function(){
??????????? var speed = 0;
??????????? if(alpha>iTarget){
??????????????? speed =-10;
??????????? }else{
??????????????? speed = 10;
??????????? }
?????????? if(alpha == iTarget){
?????????????? clearInterval(timer);
?????????? }else{
?????????????? alpha+=speed;
?????????????? odiv.style.filter='alpha(opactiy:alpha)';
?????????????? odiv.style.opacity=alpha/100;
?????????? }
??????? },30)
??? }
</script>
</html>