javascript - 在 mouseenter 和 mouseleave 事件中使用 setTimeout

Question

我有以下内容：

$("#header .navigation li.menu-item-first a").mouseenter(function() {
    $(".sub-nav").css("display", "block");
}).mouseleave(function() {
    $(".sub-nav").css("display", "none");
});

我不想.sub-nav在用户将鼠标移开后立即消失。我将如何setTimeout融入这些？

Answer 1

还有一种方法可以使用delay()

$("#header .navigation li.menu-item-first a").mouseenter(function() {
  $(".sub-nav").stop(true).css("display", "block"); //stop "animation" and clear queue
}).mouseleave(function() {
  $(".sub-nav").delay(1000).fadeOut(1);
});

使用演示

Answer 2

$("#header .navigation li.menu-item-first a").mouseenter(function() {
  $(".sub-nav").css("display", "block");
}).mouseleave(function() {
    window.setTimeout(function() {
        $(".sub-nav").css("display", "none");
    }, 1000);
});

也许？