jquery - Jquery延迟css div位置

Question

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

我已经管理了动画方面，但不是很超时。有任何想法吗？

Answer 1

您应该使用代表菜单的mouseout事件div来实现如下功能：

var waitingForMenuToHide = false;

function myOnMouseOut() {
    waitingForMenuToHide = true;
    setTimeout(function() {
        if (waitingForMenuToHide) {
            // Hide the menu div...
        }
    }, 5000);
}

以及mouseover重置waitingForMenuToHide变量的事件：

function myMouseOver() {
    waitingForMenuToHide = false;
}

Answer 2

不幸的是，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...
});

Answer 3

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

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

Answer 4

在 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);});