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

关于抖动问题 BUG 当速度为30时到达0时会来回抖动

<!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  就会来回抖动，请问怎么解决？