怎么解決再次放到分享處時卡頓的情況
<!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)
?}
</script>
</body>
</html>