Move ДИВ анимация OnMouseOver, onmouseout

Question

Мой код ниже:

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>