Question

I have written this code which fades out the navigation menu to 50% opacity when the mouse is dormant:

var hidden, fadenav, dimNav = function () {
    hidden = true;
    $('#main-nav').animate({'opacity': 0.5}, 200);
};

$('document').ready(function () {
    dimNav();
    $('body').on('mousemove', function (e) {
        if (hidden) {
            $('#main-nav').animate({'opacity': 1}, 200);
            hidden = false;
        }
        if (fadenav !== null) {
            clearTimeout(fadenav);
        }
        fadenav = setTimeout(dimNav, 500);
    });
});

What I want to do is make it so that it doesn’t fade when the user has their mouse over the #main-nav element.

I have tried this to no avail:

$('#main-nav').on('mouseover mouseout', function (e) {
    if (e.type === 'mouseover') {
        clearTimeout(fadenav);
    } else {
        fadenav = setTimeout(dimNav, 500);
    }
});

does anyone have any idea how to do this?

Answer 1

Well this certainly is not less code but it may be a bit more straight forward:

​$('#main-nav').on('mousemove',function(e){
    if(hidden){
        $('#main-nav').animate({'opacity': 1}, 200);
        hidden = false;
    }  
    clearTimeout(fadenav);
    e.stopPropagation();
});

add that instead of:

$('#main-nav').on('mouseover mouseout', function (e) {
    if (e.type === 'mouseover') {
        clearTimeout(fadenav);
    } else {
        fadenav = setTimeout(dimNav, 500);
    }
});

you don’t have to play with classes at all.

Here is my working sample: http://jsfiddle.net/TbwSA/1

EDIT: I realized that you don’t even need the mouseout event.