0

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

1 Answer 1

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.

1
  • 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 3, 2013 at 16:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.