Question

我试图让我的菜单栏在大约5秒不活动超时后部分隐藏。菜单位于距离页面顶部20px的位置，基本的想法是，一旦菜单向上移动，菜单的一小部分仍然可见，以允许用户将鼠标悬停在此菜单上以便再次下拉菜单（希望这会使感！）。

我已经管理了动画方面但不是超时。有什么想法吗？

Answer 1

您应该使用代表菜单的mouseout的{{1}}事件来实现这样的功能：

div

和var waitingForMenuToHide = false; function myOnMouseOut() { waitingForMenuToHide = true; setTimeout(function() { if (waitingForMenuToHide) { // Hide the menu div... } }, 5000); }事件重置mouseover变量：

waitingForMenuToHide

Answer 2

不幸的是，jQuery没有延迟功能。但是，您可以通过将元素的不透明度从1设置为1来使用偷偷摸摸且不太脏的黑客来模拟延迟：

$('#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...
});

Answer 3

尝试查看HoverIntent。 http://cherne.net/brian/resources/jquery.hoverIntent.html

这使得在用户停止与菜单交互后延迟执行操作非常容易。

Answer 4

在mouseout事件中，使用回调启动超时以向上滚动元素。在mousover事件中，如果有超时，请使用以下命令将其终止：

clearTimeout(timer);

所以它会像：

var timer;
$('mybar').mouseover(function(){clearTimeout(timer);/* Animate down code here */});
$('mybar').mouseout(function(){timer=setTimeout(function(){/* Animate up Code Here */}, 5000);});

Jquery延迟了css div的位置

4 个答案: