JQuery 鼠标事件触发 If 语句答案

【问题标题】：JQuery Mouse Event Trigger If StatementJQuery 鼠标事件触发 If 语句
【发布时间】：2012-10-02 03:15:59
【问题描述】：

我有一个我想更好地控制的绑定。这是代码：

 $('#topnav').bind({

                            mouseenter: function() {
                                $("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'});
                            },
                            mouseleave: function() {
                                   $("#topnav").delay(2000).animate({opacity: 0.9, width: '310px', height: '33px'});
                            }

                            });

目前你看到我正在延迟 mouseleave，因为这个人正在“mouseenter-ing”的导航栏非常小，如果鼠标碰巧离开一秒钟，它会触发 mouseleave 事件。我想控制得更好一点。我想要某种类型的 if 语句，上面写着“如果鼠标离开 #topnav div 不到三秒钟并重新进入，则假装鼠标从未离开过”

如果这没有意义，我会澄清。

谢谢！

【问题讨论】：

cherne.net/brian/resources/jquery.hoverIntent.html
@MattBall 我真的很想要一个 Jquery 版本，而不是有另一个脚本来控制它。不过还是谢谢
HoverIntent 是一个 jQuery 插件。这意味着它是 jQuery。你想让我们为你重新发明轮子吗？这已经解决了，不再是一个遥远有趣的问题。我会通过;享受你的夜晚。
@MattBall 看下面。无需再发明。

标签： javascript jquery jquery-ui mouseevent mouseover

【解决方案1】：

您可以使用setTimeout() 和clearTimeout() 实现此目的：

var tout;
$('#topnav').bind({
  mouseenter: function() {
    clearTimeout(tout);
    $("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'});
  },
  mouseleave: function() {
    tout = setTimeout(function() {
      $("#topnav").animate({opacity: 0.9, width: '310px', height: '33px'});
    }, 2000);
  }
});

【讨论】：

@ScottS 谢谢，工作就像做梦一样。感谢您的简单回答！

【解决方案2】：

利用 setTimeout() 和 clearTimeout()

var timeout = null
var onMouseEnter = function(){
  clearTimeout(timeout)
  $("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'}) 
}

var onMouseLeave = function(){
  timeout = setTimeout(function(){
    $("#topnav").animate({opacity: 0.9, width: '310px', height: '33px'});
  },1000)
}

$('#topnav').bind({ mouseenter: onMouseEnter, mouseleave: onMouseLeave })

http://jsfiddle.net/gmhLZ/

【讨论】：