jQuery延迟css div位置答案

【问题标题】：Jquery delayed css div positionjQuery延迟css div位置
【发布时间】：2009-05-26 10:51:38
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

不幸的是，jQuery 没有延迟功能。但是，您可以使用偷偷摸摸且不太脏的 hack 来模拟延迟，通过将元素的不透明度设置为 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...
});

【讨论】：

这不会在 5 秒后隐藏菜单而不考虑不活动吗？就我得到的问题而言，更多的是关于从不活动开始设置超时的逻辑......
公平点。将我的示例编辑为鼠标悬停而不是页面加载。
opacity hack 似乎工作正常，它在菜单向上动画之前给了我想要的 5 秒位置，不错！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

var waitingForMenuToHide = false;

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

和mouseover 事件重置waitingForMenuToHide 变量：

function myMouseOver() {
    waitingForMenuToHide = false;
}

【讨论】：

【解决方案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);});

【讨论】：