javascript - 在鼠标悬停、鼠标移出时移动 div 动画

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>