FadeOut Element Mouse Dormant

by bizamajig

HTML

<div id='main-nav' style='width:200px;height:100px;background-color:blue;text-align:center;color:white;'>Some div stuff</div>

JavaScript

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

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