Hey here is a working fiddle for you
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.