jQuery - Mouseleave not firing

Question

I am trying to inject some jQuery magic into a horizontal drop-down menu. On mouseover/mouseenter it works as expected, however mouseleave does not seem to be firing. I have the following fiddle set up here: http://jsfiddle.net/shalan/c28cU/8/.

Upon hovering over ABOUT, the second level is meant to fade and slide up into view underneath ABOUT (which it does), but on mouseleave it simply vanishes instead of fading out and sliding down simultaneously.

I am trying to troubleshoot what could be the problem, but I'm running out of ideas. If you look at the Fiddle referenced above, you will see the following lines of CSS (line 38 in CSS pane):

/* INITIAL STYLING FOR 2ND LEVEL UL CONTAINER */
nav ul li ul {
    display:none;
    position:absolute;
    background:#777;
    top:50px;
}

Now if I comment out the line display:none;, then mouseleave does work as expected, but will obviously activate when you hover in the area below the ABOUT list item. I've also tried different JS methods using on(), hover(), and bind() - the latter which doesn't work.

At this stage, I am unsure if its a JS or CSS issue. I would sincerely appreciate any help in this regard. Many thanks!

Answer 1

Hey here is a working fiddle for you

http://jsfiddle.net/Gkp34/

I removed the css display: none; and instead set the styling block with js on hover.

On mouseleave I've set a callback for the animation to set display: none when animation is done.

function usingOn() {
    nav.on({
        mouseenter: function() {
            $(this).find('ul').css('display','block').eq(0).stop(true, true).animate({ opacity:'1' , top: '40px' }, { duration:200, queue:false });
        },
        mouseleave: function() {
            $(this).find('ul').eq(0).stop(true, true).animate({ opacity:'0' , top: '50px' }, { duration:300, queue:false, complete: function () {
                            // Animation complete.
                            $(this).css('display','none');
                        } });  
        }
    });
}

This should work also for your usingBind() or usingHover() function.

Answer 2

use mouseout instead of mouseleave, try that...