Question

I have created a simple drop-down menu with JQuery, following a tutorial. LINK :
http://wabism.com/development/jquerydropdown/

Its jQuery code is this:

$('body').ready(function() {

                // Add the 'hover' event listener to our drop down class
        $('.dropdown').hover(function() {
                        // When the event is triggered, grab the current element 'this' and
                        // find it's children '.sub_navigation' and display/hide them
            $(this).find('.sub_navigation').slideToggle(); 
        });
    });

Drop-down works fine with 1 error. If you rollover and out a menu item 3 or 4 times quickly, it does all the 3 or 4 slidetoggle() ‘s. How can I overcome this problem ?

Answer 1

Use .stop() method before animation.

As you described, animations in jQuery would be queued and all of them would be executed, unless you explicitly specify that you want any pending animation to stop. You would do this using .stop() function. In your case you should write:

$(this)
.find('.sub_navigation')
.stop()
.slideToggle();

It has some parameters too which would give you more granular level of control. See here.