jQuery - Preventing queuing up hover functions from fast mouse movements

Question

This is an issue I seem to keep coming across. If for example I have a drop down navigation menu using a jQuery hover() function and I quickly move my mouse cursor over then off the <li> about 10 times, the subnavigation will appear, then disappear 10 times.

Is there any way to prevent this issue from occuring?

Thanks

Very similar, 3 mins older: http://stackoverflow.com/questions/4256962/jquery-show-hide-question-about-the-delay-variable — sje397, Nov 23 '10 at 14:36
I often do, but this time I have no code to post, just a question :) — Probocop, Nov 23 '10 at 14:36
@sje397 Good find. Better explanation of HoverIntent in there as well. — Gregg B, Nov 23 '10 at 14:43

score 7 · Answer 1 · answered Nov 23 '10 at 14:32

7

Yes, use the stop function !

$(this).stop().animate(...);

Or

$(this).stop().show();

answered Nov 23 '10 at 14:32

Flipke

971
6
10

score 4 · Accepted Answer · answered Nov 23 '10 at 14:34

4

We use Hoverintent for our menus. Gives a smart delay before animating:

http://cherne.net/brian/resources/jquery.hoverIntent.html

answered Nov 23 '10 at 14:34

Gregg B

13,139
6
34
50

score 3 · Answer 3 · answered Nov 23 '10 at 14:37

3

Use the stop() function to clear the animation queue of an element:

$(this).stop(true).show();

answered Nov 23 '10 at 14:37

Eric

95,302
53
242
374

score 1 · Answer 4 · answered Nov 23 '10 at 14:34

Well you could unbind the event on entry to it, and bind it again on exit. I tend to use semaphore variables when I can not afford re-entry.

Having said that, the hover() event itself is probably not queuing, but the animations themselves. Either note that you have an animation in progress (semaphores) again, and don't issue another, or stop() the animation(s) in progress before continuing.

jQuery - Preventing queuing up hover functions from fast mouse movements

4 Answers4