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

我设置的透明度是opacity属性的，执行的时当鼠标移进去opacity的值在1~1.1 之间跳动移出去的时候opacity在0.2~0.3之间跳动，然而结果很明显div一直在抖动我不知是哪里出问题，求解答

<style>

body{ margin:0; padding:0;}

#dv{ background: #006; width:100px; height:100px; opacity:0.3;}

</style>

window.onload=function(){

var dd=document.getElementById('dv');

dd.onmouseover=function(){

start(1);

}

dd.onmouseout=function(){

start(0.3);

}

var time=null;

var opty=0.3;

function start(vaule){

clearInterval(time);

var dd=document.getElementById('dv');

time=setInterval(function(){

var speed=0;

if(opty>vaule){

speed=-0.1;

}

else{

speed=0.1;

}

if(opty==vaule){

clearInterval(time);

}

else{

opty+=speed;

dd.style.opacity=opty;}

},30)

}

</script>

</head>

<body>

</body>

lhb3604072

2016-07-10

源自：JS动画效果 2-2

关注问题我要回答

1916

操作

收起

3 回答

qq_幸福不缺氧_03691061
2016-08-13

很明显，opacity在1~1.1，说明这时候已经溢出了~

用整数没有问题，如下

body{ margin:0; padding:0;}

#dv{ background: #006; width:100px; height:100px; opacity:0.3;}

</style>
<script type="text/javascript">
window.onload=function(){
var dd=document.getElementById('dv');
dd.onmouseover=function(){
startmove(100);
}
dd.onmouseout=function(){
startmove(30);
}
}
var time=null;
var opty=30;
function startmove(value){
   clearInterval(time);
     var dd=document.getElementById('dv');
time=setInterval(function(){
   var speed=0;
if(opty>value){
speed=-2;
}
else{
speed=2;
}
     if(opty == value){
            clearInterval(time);
}
else{
opty+=speed;
dd.style.opacity=parseFloat(opty/100);
}
},30);
}
</script>
</head>
<body>
<div id="dv"></div>
</body>