为什么onmouseout不执行？？

Question

window.onload=function(){

    var oDiv = document.getElementById('div');
    var timer= null;

    oDiv.onmouseover=function(){
        startMove1();    
    }
    oDiv.onmouseout=function(){
        startMove2();
    }

    function startMove1(){
      clearInterval(timer);
      timer=setInterval(function(){
          if(oDiv.offsetLeft==0){
            clearInterval(timer);
          }else{
            console.log(111);
            oDiv.style.left=oDiv.offsetLeft+10+'px';
          }             
      },30);
    }

    
    function startMove2(){
      clearInterval(timer);
      timer=setInterval(function(){
          if(oDiv.offsetLeft==-150){
            clearInterval(timer);
          }else{
            oDiv.style.left=oDiv.offsetLeft-10+'px';
          }             
      },30);
    }

  }
  
  

<div id="div">

<div id="div1">分享到</div>

</div>

Answer 1

问题1:

你是改变元素的 left 属性实现动画效果，至少 #div 元素是绝对或者固定定位的

问题2:

你在 mouseover 上结束动画的条件是 left 为 0，此外都是移动的。那么是不是说 left 默认不能设置为 0，否则你的动画不会运行。

问题3；

mouseout 上结束动画的条件是 left 为 -150, 按你每次 ＋10 和 －10 的移动方式，那么 left 默认设置必须是 10 或者 10 的倍数

Answer 2

谁说onmouseout没有执行呢？？？你可以在事件中加一个console.log打印看看，分别是执行的很好。我想你的问题是为什么oDiv就不动呢？
是啊，它为什么就不动呢？明明有设置它的位置的oDiv.style.left=oDiv.offsetLeft-10+'px';

这要涉及到CSS的问题，因为当前oDiv的的定位方式是“流模式”，它的定位同浏览器实时计算所得，JS代码无法更改它的位置。如果你想要看看效果，可以把定位方式设置为position:absolute即可。刷新页面可以看到你的DIV在跳来跳去。

Answer 3

首先，你的onmouseout的确是执行了的，只是你的style在js控制后你没有看到效果
根据的你代码我脑补你是要让你的div移动对吧，如果你要让css的left生效的话就一定要给这个元素添加position属性才能让left有效：