我试图让我的菜单栏在大约 5 秒的不活动超时后部分隐藏。菜单位于距页面顶部 20px 的位置,基本思想是,一旦向上移动,菜单的一小部分仍然可见,以允许用户将鼠标悬停在该菜单上以使其再次下拉(希望这使得感觉!)。
我已经管理了动画方面,但不是很超时。有任何想法吗?
我试图让我的菜单栏在大约 5 秒的不活动超时后部分隐藏。菜单位于距页面顶部 20px 的位置,基本思想是,一旦向上移动,菜单的一小部分仍然可见,以允许用户将鼠标悬停在该菜单上以使其再次下拉(希望这使得感觉!)。
我已经管理了动画方面,但不是很超时。有任何想法吗?
您应该使用代表菜单的mouseout
事件div
来实现如下功能:
var waitingForMenuToHide = false;
function myOnMouseOut() {
waitingForMenuToHide = true;
setTimeout(function() {
if (waitingForMenuToHide) {
// Hide the menu div...
}
}, 5000);
}
以及mouseover
重置waitingForMenuToHide
变量的事件:
function myMouseOver() {
waitingForMenuToHide = false;
}
不幸的是,jQuery 没有延迟功能。但是,您可以通过将元素的不透明度设置为从 1 到 1 的动画来使用偷偷摸摸且不太脏的 hack 来模拟延迟:
$('#visibleElement') // Assuming the element is already shown
.animate({opacity: 1.0}, 3000); // do nothing for 3 seconds
因此,要在鼠标离开 5 秒后向上滑动菜单,您可以执行以下操作:
$('#menuDiv').mouseout(function(){
.animate({opacity: 1.0}, 5000)
.animate( slide up etc...
});
尝试查看 HoverIntent。 http://cherne.net/brian/resources/jquery.hoverIntent.html
这使得在用户停止与您的菜单交互后延迟执行操作变得非常容易。
在 mouseout 事件上,使用回调启动超时以向上滚动元素。在鼠标悬停事件中,如果超时,请使用以下命令将其终止:
clearTimeout(timer);
所以它会是这样的:
var timer;
$('mybar').mouseover(function(){clearTimeout(timer);/* Animate down code here */});
$('mybar').mouseout(function(){timer=setTimeout(function(){/* Animate up Code Here */}, 5000);});