Using setTimeout in mouseenter and mouseleave events

Question

I have the following:

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

I don't want .sub-nav to disappear as soon as the user moves the mouse away. How would I integrate setTimeout into these?

Answer 1

there is also way to use 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);
});

Maybe?