<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style style="text/css"> *{ margin:0; padding:0; } #div1{ width:200px; height: 200px; background: red; filter:alpha(opacity:30); /* 兼容IE */ opacity: 0.3; } </style> <script> 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){ var oDiv = document.getElementById('div1'); clearInterval(timer);//防止定时器叠加 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(opacity:'+alpha+')'; oDiv.style.opacity = alpha/100; } },30) } </script> </head> <body> <div id="div1"></div> </body> </html>