background blackout on Nav mouseover not to strobe

Question

i have a navigation that i want to have a background blackout similar to that of selfridges.

I have the basic functionality setup here

jQuery:

jQuery('<div class="backmask"></div>').insertAfter('.wrapper');


function removeBlack() {

jQuery('.nav-container').removeClass('navmask');
jQuery('.backmask').fadeOut(300);

}

function addBlack() {

jQuery('.nav-container').addClass('navmask');
jQuery('.backmask').fadeIn(100);

}

jQuery('.nav li').hover(addBlack, removeBlack);

however, when you mouse from one element to another it strobes rather than just keeps the black background in tact.

I've tried various 'if' statements within the 2 functions and i keep getting to a stage where i think yes it's nearly done, but then it fails again.

ps i do not want to change #nav li to just #nav because then if my navigation doesn't stretch the whole width of the navigation i don't want poeple mousing into empty space for it to black the background out.

any ideas? am i just missing one critical jquery selector? e.g. treat all those #nav li as one element?

thanks.

###EDIT

since the helpful answer from mornaner this is my code now:

jQuery('<div class="backmask"></div>').insertAfter('.wrapper');


function removeBlack() {

jQuery('.nav-container').removeClass('navmask');
jQuery('.backmask').fadeOut(200);

}

function addBlack() {

    jQuery('.nav-container').addClass('navmask');
    jQuery('.backmask').fadeIn(100);

}

jQuery('#pronav li').hover(function(){
 clearTimeout(jQuery(this).data('timeoutId'));
addBlack();
}, function(){
var nav = jQuery('#pronav li');
var timeoutId = setTimeout(function(){
    removeBlack();
}, 80);
//set the timeoutId, allowing us to clear this trigger if the mouse comes back over
nav.data('timeoutId', timeoutId);
});

score 1 · Accepted Answer · edited May 23 '17 at 11:48

1

Based on this answer I did it:

jQuery('.nav li').hover(function(){
        clearTimeout($(this).data('timeoutId'));
        addBlack();
    }, function(){
        var someElement = $('.nav li');
        var timeoutId = setTimeout(function(){
        removeBlack();
    }, 150);
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
    someElement.data('timeoutId', timeoutId);
});

DEMO

You can adjust the timeout time, with 150ms it looks smooth to me, but you can lower it if you feel it's too long.

edited May 23 '17 at 11:48

Community

1
1

answered Jan 03 '13 at 13:33

mornaner

2,424
2
27
39

Yep thats done the trick :) thanks - i knew it was one seemingly simple thing i was missing. I kept stumbling accross Timeout but couldn't quite figure out how to uterlise it. So learn't something today (havn't quite reached that chapter yet :) ) – Flakx Jan 03 '13 at 16:37

background blackout on Nav mouseover not to strobe

1 Answers1