JS缓冲动画中为什么会卡住闪动？
<!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}
.bigBox
{
width:200px;
height:200px;
left: -200px;
top:120px;
background:red;
position:relative;
opacity:30;
}
span
{
width: 20px;
height: 50px;
background: blue;
position: absolute;
left: 200px;
top: 75px;
}
</style>
<script type="text/javascript" >
window.onload=function()
{
var movebigBox=document.getElementById("big");
var timerId = null;
movebigBox.onmouseover=function(){moveFun(0)};
movebigBox.onmouseout=function(){moveFun(-200)};
function moveFun(target)
{
clearInterval(timerId);
var timerId=setInterval(function move()
{
var speed=(target-movebigBox.offsetLeft)/20;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(movebigBox.offsetLeft==target)
{
clearInterval(timerId);
}
else
{
//document.title=speed;
movebigBox.style.left = movebigBox.offsetLeft+speed+"px";
}
},30);
}
}
</script>
</head>
<body>
<div class="bigBox" id="big" >
<span>分享</span>
</div>
</body>
</html>
