javascript - 就加了一个setInterval( )计时器让图片缓缓收起，怎么会 出现了颤抖效果？
本文介绍了javascript - 就加了一个setInterval( )计时器让图片缓缓收起，怎么会 出现了颤抖效果？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
点击左箭头让图片主体缓缓滑出，这个实现了，没有问题。
然后再点击右箭头让图片缓缓收回去，本来很简单，仔细检查代码也没有问题，怎么就是收不回去还不断颤抖？
就几行代码，abc和bbc两个函数，一个展开一个收起。问题出在哪了？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页广告特效——豆瓣音乐</title>
<style>
*{margin:0; padding:0;}
#dbmove{height:50px; float:left; background-image:url(5.jpg);}
#dbshow{height:50px; width:50px; float:left; background-image:url(6.jpg); display:block;}
#dbhid{height:50px; width:50px; float:left; background-image:url(7.jpg); display:none;}
</style>
<script>
window.onload=function (){
var dbmove=document.getElementById('dbmove');//抓取豆瓣音乐主体
var dbshow=document.getElementById('dbshow');//抓取展开箭头（右箭头）
var dbhid=document.getElementById('dbhid'); //抓取收起箭头（左箭头）
function abc(){//展开时宽度递增，34行此函数被调用
if(parseInt(dbmove.style.width)<200){//当豆瓣音乐主体宽度小于200，执行宽度递增5
dbmove.style.width=parseInt(dbmove.style.width)+5+'px';
}
}
function bbc(){//收起时宽度递减，41行此函数被调用
if(parseInt(dbmove.style.width)>0){//当豆瓣音乐主体宽度大于0，执行宽度递减5
dbmove.style.width=parseInt(dbmove.style.width)-5+'px'
}
}
dbshow.onclick=function (){//当点击右箭头展开
dbshow.style.display='none';//右箭头隐藏
dbhid.style.display='block';//左箭头显示
var timer=setInterval(abc,5);//每5毫秒执行函数abc，宽度递增，函数见18行
}
dbhid.onclick=function(){//当点击左箭头收起
dbshow.style.display='block';//右箭头显示
dbhid.style.display='none';//左箭头隐藏
var timer=setInterval(bbc,5);//每5毫秒执行函数bbc，宽度递减，函数见23行
}
}
</script>
</head>
<body>
<div>
<div id="dbmove" style="width:0px;"></div>
<div id="dbshow"></div>
<div id="dbhid"></div>
</div>
</body>
</html>
请输入代码
解决方案
你的setInterval从来没有清除，一直在运行。所以后面是同时有两个setInterval在运行，一个向左一个向右，有一点时间差，所以表现为抖动。
这篇关于javascript - 就加了一个setInterval( )计时器让图片缓缓收起，怎么会 出现了颤抖效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
