jQuery - slideToggle, links continue to slide up and down

Question

I'm trying to have some menu items slide down when a user hovers on an image, then hide when they move the cursor away from the image and/or the menu items. The problem is, if the user isn't really, really accurate when they move the mouse to a menu item, the menu items will slide up, and down, and up... and down.

Is there a way to get this working so that once the menu items appear, they will remain in place until the user "mouses out" of either the main image, or the link items below the image?

Here's a JSFiddle . Any help is appreciated.

Answer 1

Stop the hover events from propagating when called on the .slideBucket children. You'll need to also position the slideBucket up so that it overlaps the bucket and a mouseleave is not triggered. And then manually do the slideUp on the slideBucket. Adding a .stop(true, true) also helps clean up the animation:

http://jsfiddle.net/gilly3/yHMQV/9/

$(".bucket").hover(function() {
    $(this).children('.slideBucket').stop(true, true).slideToggle('400');
}).children('.slideBucket').hover(function(e) {
    e.stopPropagation();
}, function(e) {
    e.stopPropagation();
    $(this).slideUp(400);
});

Answer 2

Here's my version: jsfiddle
hover actually takes two functions :-)

$(document).ready(function(){  
    $(".bucket").hover(  
        function(){  
            $(this).children('.slideBucket').slideDown('400');  
        },  
        function(){  
            $(this).children('.slideBucket').slideUp('400');  
        }  
    );  
});