移動divのアニメーション、以下

Question

私のコード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"; 
     } 
    } 

} 

HTML：

<div id="menu-field" onmouseover="showMenu()" onmouseout="hideMenu()" > 
    <div id="menu"></div> 
</div> 

私はdiv要素がオーバーマウスの右に移動して戻って移動を開始したいですマウスのアウトの開始位置に移動します。これは、マウスを押してもshowMenu関数を実行します。

Answer 1

これは、CSSとJavaScriptを使用しない方が基本的に優れている可能性があります。私はそれが動く方法のように

#menu-field { 
 
    background: #eee; 
 
    height: 200px; 
 
    width: 80px; 
 
} 
 

 
#menu { 
 
    background: #aaa; 
 
    height: 100px; 
 
    width: 80px; 
 
    transition: transform 1s; 
 
} 
 

 
#menu-field:hover #menu { 
 
    transform: translateX(80px); 
 
}

<div id="menu-field"> 
 
    <div id="menu">Menu</div> 
 
</div>