jQuery mousemove: have navbar appear only when mouse moves -

i've figured out how have navbar appear on mousemove, i'm have trouble figuring out how have disappear again after mouse stops moving.

css

nav{   display:none; } 

javascript

$(document).mousemove(function(event) {        $("nav").css("display", "block"); }); 

i'm sure there's easy solution, i've been looking while no avail.

thanks!

you use timeout system this:

var timer;  $(window).on('mousemove', function () {   $('nav').addclass('show');   try {     cleartimeout(timer);   } catch (e) {}   timer = settimeout(function () {     $('nav').removeclass('show');   }, 50); }); 

with styles this:

nav {   background: #333;   color: #fff;   visibility: hidden;   opacity: 0;   transition: .5s ease; }  nav.show {   opacity: 1;   visibility: visible; } 

the 50ms makes adjustable how sensitive want be.