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

求解：鼠标离开或者划过的时候,Div一直在闪？根本停不下来

<!doctype html>
<html>
<head>
<style type="text/css">
body,div{
margin:0;
padding:0;
}
div{
width:200px;
height:200px;
margin:10px;
float:left;
background:red;
opacity:0.3;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementsByTagName("div");
for(var i=0;i<oDiv.length;i++){
oDiv[i].ialpha=0.3;
oDiv[i].onmouseover=function(){
startMove(this,1);
}
oDiv[i].onmouseout=function(){
startMove(this,0.3);
}
}
}
//var timer=null;
//var ialpha=0.3;
function startMove(obj,iTarget){
//var oDiv=document.getElementById("div1");
clearInterval(obj.timer);
timer=setInterval(function(){
var speed=0;
if(obj.ialpha>iTarget){
speed=-0.1;
}else if(obj.ialpha<iTarget){
speed=0.1;
}
if(obj.ialpha==iTarget){
clearInterval(obj.timer);
}else{
obj.ialpha+=speed;
obj.style.opacity=obj.ialpha;
}
},1000)
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>

firefox偶尔ialpha=0.9999999999999999这种

chrome中 opacity=09/1/1.1；opacity=02/0.3/0.4一直在变化

（fedora）

AL_Cherish

2015-12-17

源自：JS动画效果 4-1

关注问题我要回答

977

操作

收起

2 回答

慕男婶回答被采纳 +3 积分
2015-12-17

估计是吃了炫迈了吧。。

经过我的检查，你的程序至少有3处错误和1处不恰当的地方。

试试下面的代码，就是你想要的效果

<!DOCTYPE html>
<html>
<head>
 <style type="text/css">
 body,div{
 margin:0;
 padding:0;
 }
 div{
 width:200px;
 height:200px;
 margin:10px;
 float:left;
 background:red;
 opacity:0.3;
 }
 </style>
 <script>
 window.onload=function(){
   var oDiv=document.getElementsByTagName("div");
   for(var i=0;i<oDiv.length;i++){
     oDiv[i].ialpha=0.3;
     oDiv[i].onmouseover=function(){
       startMove(this,1);
     }
     oDiv[i].onmouseout=function(){
       startMove(this,0.3);
     }
   }
 }
 //var timer=null;
 //var ialpha=0.3;
 function startMove(obj,iTarget){
   //var oDiv=document.getElementById("div1");
   clearInterval(obj.timer);
   var speed=0;
   // 第一处错误：timer 前面没有写 obj.
   obj.timer=setInterval(function(){
     // 第二处错误：把速度写在了函数内部
     // var speed=0;
     if(obj.ialpha>iTarget){
        speed=-0.1;
     }else if(obj.ialpha<iTarget){
        speed=0.1;
     }
     // 第三处错误：运动停止条件判断不正确。
     if(Math.abs(obj.ialpha - iTarget) <= 0.1){
        clearInterval(obj.timer);
     }else{
        obj.ialpha+=speed;
        obj.style.opacity=obj.ialpha;
     }
     // 不恰当之处：间隔时间写的太长了，我改成了30。。运动相关的函数间隔写30ms比较好。。
   },30)
 }
 </script>
</head>
<body>
 <div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
 <div id="div4"></div>
</body>
</html>