javascript - JQuery 鼠标事件触发 If 语句

Question

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

 $('#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 不到三秒钟并重新进入，则假装鼠标从未离开过”

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

谢谢！

Answer 1

setTimeout()您可以使用and实现此目的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);
  }
});

Answer 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/