Question

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

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.)