將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>