                        課程
                    
                        /前端開發
                        
                            /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

關注問題我要回答

1023

操作

收起

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>