javascript - jQuery鼠标事件触发器If语句

我有一个绑定，我想控制得更好。.这是代码的第一篇：

 $('#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，因为此人正在“进入”的导航栏很小，并且如果鼠标碰巧停留了一秒钟，就会触发mouseleave事件。我想更好地控制它。我想要某种类型的if语句，它表示“如果鼠标离开#topnav div少于三秒钟并重新进入，请假装鼠标永远不会离开”

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

谢谢！

最佳答案

您可以使用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);
  }
});