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

怎么解决再次放到分享处时卡顿的情况

<!DOCTYPE html>
<html>
<head>
<title>运动</title>
<style type="text/css">
     body,div,span{
     padding: 0px;
     margin: 0px;
     }
  #oIn{
   background-color: red;
   width: 400px;
   height: 300px;
   position: relative;
   left: -400px;
   top: 0px;
  }
  #oOut{
   background-color: green;
   width: 30px;
   height: 50px;
   font-size: 5px;
   position: absolute;
   top: 130px;
   left: 400px;
  }
</style>
</head>
<body>
<div id="oIn"><span id="oOut">分享</span></div>
<script type="text/javascript">
var mOut=document.getElementById('oOut');
var mIn=document.getElementById("oIn");
var timer;
var timer1;
window.onload=function(){
  oOut.onmouseover=function() {
   oMove();
  }
  oOut.onmouseout=function(){
   oHidden();
  }
}
function oMove() {
  clearInterval(timer);
       timer=setInterval(function(){
       if (oIn.offsetLeft==0) {
         clearInterval(timer);
       }
       else{
     mIn.style.left=mIn.offsetLeft+1+'px';
     }
},30)
}
function oHidden() {
  clearInterval(timer);
  clearInterval(timer1);
  timer1=setInterval(function(){
   if (oIn.offsetLeft==-400) {
    clearInterval(timer1);
   }
   else{
    mIn.style.left=mIn.offsetLeft-1+'px';
   }
  },30)
}