<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>share</title> <style> body,div,span{ margin: 0; padding: 0; } #div1{ width: 200px; height: 200px; background: red; filter: alpha(opacity:30); opacity: 0.3; } </style> <script> window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ startChange(100); } oDiv.onmouseout=function(){ startChange(30); } } var timer=null; var alpha=30; function startChange(iTarget){ var oDiv=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha>30){ speed=-10; }else{ speed=10; } if(alpha==iTarget){ clearInterval(timer); }else{ alpha=alpha+speed; oDiv.style.filter="alpha(opacity:"+alpha+")"; oDiv.style.opacity=alpha/100; } },30); } </script> </head> <body> <div id="div1"></div> </body> </html>
把if(alpha>30){}改成if(alpha>iTarget){}
起初你的alpha是30,之后自增10,alpha是40,过了30毫秒再调用一次函数,此时alpha〉30,speed为-10,之后alpha自减10,又变成30,所以总是循环再0.3和0.4之间