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

demo of usage

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

也许？