jquery hover event not working properly

Question

Hello,

I have a simple horizontal menu and when I hover each one of the items a sub menu slides down. So basically it is a typical navigation menu that we see so often. I want that when hovering the sub menu slides down and up when mouse out. My problem is that if I move the mouse so fast through the items it happens that more than one sub menu stays visible. I guess it's because the slide down was not finished when I trigger the slide up. Some idea to prevent this? Heres my code:

        $('#menu > li').hover(
                function () {
                    $('ul',$(this)).slideDown();
                },
                function () {
                    $('ul',$(this)).slideUp();
                }
            );

Thanks!

Answer 1

Before your slideUp you could probably use the stop() function to stop all current animations.

http://docs.jquery.com/Effects/stop

Answer 2

what may be happening is that the mouseleave event isn't firing at all. You could test that by adding some console.log statements to the start of the event handlers, and then checking IE8's Developer Tools or Firebug to see whether all the events are firing.

If you want to interrupt a running animation, jQuery has a stop() method that does that. You might also want to have each slideDown cause all the others to slide up.

Answer 3

This is because your animation queue is getting built up with each time you enter and leave each li element.

Try out the hoverFlow jQuery Plugin

Answer 4

You should call stop before sliding up and down, and from your description, you should also pass true for both optional parameters like this:

$('ul',$(this)).stop(true, true).slideDown();

The first parameter (clearQueue) tells jQuery to clear the animation queue, stopping any queued animations.

The second parameter (gotoEnd) tells jQuery to complete the current animation. (This parameter might not be necessary in your case, depending on the effect you want.)