[英]Move div animation onmouseover,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函数。
使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.