Javascript Fading out/in on mouse movement

Question

I want to have a fixed nav which fades out when the mouse isn't moving and fades back in when it does.

I've came across this other post which does the job but the problem is that it uses visibility and I want to use opacity that way I can make it fade in and out with a transition transition: all .4s ease-in-out;

 $("#fp-nav").style.opacity = "0"; $("html").mousemove(function(event) { $("#fp-nav").style.opacity = "1"; myStopFunction(); myFunction(); }); function myFunction() { myVar = setTimeout(function() { $("#fp-nav").style.opacity = "0"; }, 1000); } function myStopFunction() { if (typeof myVar != 'undefined') { clearTimeout(myVar); } } 

 #fp-nav { position: fixed; z-index: 100; top: 50%; opacity: 1; -webkit-transform: translate3d(0, 0, 0); transition: all .4s ease-in-out; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fp-nav"> Hello world Hello world Hello world Hello world </div> 

Or am I supposed to use fp-nav.style.opacity = "0"; instead of $("#fp-nav").style.opacity = "0";

Answer 1

You can replace .hide() and .show() by your own css code to visually hide the bar: hide becomes css("opacity", 0) and show becomes css("opacity", 1) .

Then, you add a transition to your bar:

.navbar {
   transition: opacity 1000ms ease-in-out;
};

 $("div").css("opacity", 0); $("html").mousemove(function( event ) { $("div").css("opacity", 1); myStopFunction(); myFunction(); }); function myFunction() { myVar = setTimeout(function(){ $("div").css("opacity", 0); }, 1000); } function myStopFunction() { if(typeof myVar != 'undefined'){ clearTimeout(myVar); } } 

 div { transition: opacity 1000ms ease-in-out; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>navbar</div> 

It might be nice to let the css define how you want to hide/show via an additional class. You can then, for example, use addClass("is-hidden") and removeClass("is-hidden") :

 var hiddenClass = "is-hidden"; var customHide = function($el) { $el.addClass(hiddenClass); } var customShow = function($el) { $el.removeClass(hiddenClass); } customHide($("div")); $("html").mousemove(function( event ) { customShow($("div")); myStopFunction(); myFunction(); }); function myFunction() { myVar = setTimeout(function(){ customHide($("div")); }, 1000); } function myStopFunction() { if(typeof myVar != 'undefined'){ clearTimeout(myVar); } } 

 /* CSS now determines how we want to hide our bar */ div { position: relative; background: green; transition: transform 500ms ease-in-out; } div.is-hidden { transform: translateY(-160%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>navbar</div> 

Answer 2

 $(document).on('mousemove', function(){ $('#nav').addClass('shown'); setTimeout(function(){ $('#nav').removeClass('shown'); }, 5000); }); 

 #nav { opacity: 0; transition: opacity 1s ease-in-out; background: black; width: 300px; height: 100px; } #nav.shown { opacity: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="nav"> </div> 

Here's my go:

Obviously, edit the timings and opacity as needed. The animations themselves are pure CSS, and JS is just used to add/remove a class from the nav.