Question

I created a dropdown menu using jQuery. So when I hover over a button it slides down the menu. Now if I move the mouse out of the menu and bring it back in before it slides up(menu has a lot of items so there is enough time to bring the mouse back in on the menu)over the dropdown menu it starts a chain of slideDown() and slideUp() functions and it does not stop till I move the mouse of the menu or back on the button. Below is my jQuery code:

$(function() {
    $('#slideshow1').cycle();  

    $('#projects').mouseenter(function(){
        $('#dd_Projects').slideDown();
    });  

    $('#projects').mouseleave(function(){
        $('#dd_Projects').slideUp();
    });
});

I have been looking online and I have already tried e.stopPropagation() but it does not work.

This is only happening in Firefox, everything works fine in IE7, IE8, Safari, Chrome, not sure about other versions of Firefox.

Please advise

Answer 1

jQuery’s stop function should do what you are after. Pass in true as the first parameter to clear the animation queue. You probably don’t want to jump to the end of the animation, so don’t pass true as the second param.

So something like:

$('#dd_Projects').stop(true).slideDown('fast', function(){
    $(this).css('height', '');
});

and

$('#dd_Projects').stop(true).slideUp('fast', function(){
    $(this).css('height', '');
});

in place of your current slides should do the trick.