关于抖动问题 BUG 当速度为30时 到达0时会来回抖动
来源：2-1 JS速度动画
慕粉6392586
2016-07-13 11:15
<!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>
</head>
<style type="text/css">
*{
margin:0;
padding:0;}
.move-left{
width:200px;
height:200px;
background-color:#F00;
position:relative;
left:-200px;
}
.move-right{
width:20px;
height:40px;
background-color:#00C;
left:200px;
position:absolute;
margin-top:70px;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
starMove(0);}
oDiv.onmouseout=function(){
starMove(-200);}
}
var timer=null;
function starMove(iTarget){
clearInterval(timer);
var oDiv=document.getElementById('div1');
timer = setInterval(function(){
var speed = 0;
if(oDiv.offsetLeft > iTarget){
speed = -30;}
else{
speed = 30;
}
if(oDiv.offsetLeft == iTarget){
clearInterval(timer);}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px'; }
},300)
}
</script>
<body>
<div class="move-left" id="div1">
<div class="move-right">分享</div></div>
</body>
</html>
因为目标值为0 速度为 30 宽度为200 所以到达0之前 offsetleft 值为-20 然后加30 就变成了 10 就会来回抖动，请问怎么解决？
写回答
关注
1回答
-
- 磅礴
- 2016-07-13 12:02:57
这完全是螺丝跟螺母不吻合造成的，要么你那速度改成200可以整除的数，要么就把目标位置改成速度的倍数。
JS动画效果
通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装
113925 学习 · 1443 问题
相似问题
关于速度运动遇到的bug
回答 1
JS动画，元素抖动问题
回答 1
为什么鼠标移开时，会出现不停抖动
回答 2
定时器前面一旦加了var 为什么就会抖动
回答 2
关于速度动画的问题，没反应
回答 3