Javascript 移动div动画onmouseover，onmouseout

我的代码如下：

JavaScript:

function showMenu(){
    var t = setInterval(move, 5);
    var menu = document.getElementById("menu");
    var pos = 0;

    function move(){
        if(pos>=150){
            clearInterval(t);
        }
        else{
            pos += 1;
            menu.style.left = pos + "px";
        }
    }

}

function hideMenu(){
    var t = setInterval(move, 10);
    var menu = document.getElementById("menu");
    var pos = menu.getAttribute("left");

    function move(){
        if(pos<=0){
            clearInterval(t);
        }
        else{
            pos -= 1;
            menu.style.left = pos + "px";
        }
    }

}

功能显示菜单（）{
var t=设定间隔（移动，5）；
var menu=document.getElementById（“菜单”）；
var-pos=0；
函数move（）{
如果（位置>=150）{
净间隔（t）；
}
否则{
pos+=1；
menu.style.left=pos+“px”；
}
}
}
函数hideMenu（）{
var t=设定间隔（移动，10）；
var menu=document.getElementById（“菜单”）；
var pos=menu.getAttribute（“左”）；
函数move（）{
如果（pos使用CSS而不使用JavaScript，这可能会更好地实现。这看起来可以实现您正在尝试的操作：


#菜单字段{
背景：#eee；
高度：200px；
宽度：80px；
}
#菜单{
背景：#aaa；
高度：100px；
宽度：80px；
转变：转变1s；
}
#菜单字段：悬停#菜单{
转换：translateX（80px）；
}

菜单
我喜欢它的运行方式；）@nmnsud CanIUse将全球IE9的使用率定为0.27%（大约每400人中就有一人）。这真的是一个问题吗？
<div id="menu-field" onmouseover="showMenu()" onmouseout="hideMenu()" >
    <div id="menu"></div>
</div>