2

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!

4 Answers 4

5

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

1
  • Thanks so much for the clarification about the parameters of .stop()!!! I was using .stop() for a similar effect to this question and it was STILL glitchy until I passed true for both parameters as you suggested :)
    – Brian
    Mar 14, 2011 at 15:29
3

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

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

1
  • You mean $('ul',$(this)).stop().slideUp(); ? I tried this but then I have a weird behaviour. If I start moving the mouse left and right very fast the sub menus start to shrink :)
    – Bruno
    Jan 5, 2010 at 21:24
1

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.

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.