It looks like what you want is: when you move your mouse from a tab to another tab, you don't want the fade-out and in to happen.
In that case, it's because you're not keeping track of whether or not the menu is open. You should only do the fading if the menu was not open, otherwise simply hide and show with no fade.
Code:
var timer;
var isMenuOpen = false;
$('.nav-item').hover(
function() {
$('.subnav--main').hide();
$('.promoted-content--main').hide();
clearTimeout(timer);
if(isMenuOpen){
$(this).find('ul').show();
}
else{
isMenuOpen = true;
$(this).find('ul').fadeIn( 'slow' );
}
},
function() {
timer = setTimeout(function() {
$('.subnav--main').fadeOut( 'fast' );
$('.promoted-content--main').fadeOut( 'fast' );
isMenuOpen = false;
}, 1000);
}
);
And jsfiddle: http://jsfiddle.net/qdafe3uw/
mouseenter
andmouseleave
instead ofhover
. It might simplify your logic.mouseenter
andmouseleave
, i got the same result.hover()
registers handlers for bothmouseenter
andmouseleave
, so no difference at all.