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?

...by doing it? Have you tried it?

JJJ
– JJJ

2013-05-12 14:43:46 +00:00
Commented May 12, 2013 at 14:43 — JJJ
– JJJ, Commented May 12, 2013 at 14:43

zb' · Accepted Answer · 2013-05-12 14:56:46Z

2

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

edited May 12, 2013 at 14:56

answered May 12, 2013 at 14:50

zb'

8,0693 gold badges44 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jumi · Accepted Answer · 2013-05-12 14:47:56Z

1

$("#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?

answered May 12, 2013 at 14:47

Jumi

9882 gold badges11 silver badges20 bronze badges

1 Comment

ajp15243 Over a year ago

You would want the mouseenter handler to cancel that timeout, if it exists, otherwise if the user moves their mouse out (tripping the timeout) and then back in within 1 second (or whatever the setTimeout delay is), the menu would show again with the mouseenter handler (even though it's already shown), but then hide when the timeout resolves even with the mouse on the menu.

Collectives™ on Stack Overflow

Using setTimeout in mouseenter and mouseleave events

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related