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>

移动div动画onmouseover，onmouseout

1 个答案: