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

也许？