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事件。我想控制好一点。我想要一些if语句，说“如果鼠标离开#topnav div不到三秒钟并重新进入，假装鼠标永远不会离开”

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

谢谢！

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

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/

JQuery鼠标事件触发器如果声明

2 个答案: