CODEWITHSUNDEEP
jquery
Mark B
Mark B

Reputation: 1186

jQuery - slideToggle, links continue to slide up and down

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.

Upvotes: 0

Views: 1202

Answers (2)

Kostas Maragos
Kostas Maragos

Reputation: 569

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');  
        }  
    );  
});

Upvotes: 0

gilly3
gilly3

Reputation: 91527

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);
});

Upvotes: 3

Related Questions