Panic Panic - 1 year ago 54
HTML Question

Javascript Fading out/in on mouse movement

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download