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

Question

我有一个绑定(bind)，我想更好地控制它。首先是代码:

 $('#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() 和 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);
  }
});