Javascript 在鼠标移动时淡出/淡入

Question

我想要一个固定的导航，当鼠标不移动时淡出，移动时淡入。

我遇到了 this other post 哪个做的 但问题是它使用 visibility 并且我想使用 opacity 这样我可以让它淡入和淡出过渡 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>

或者我应该使用 fp-nav.style.opacity = "0"; 而不是 $("#fp-nav").style.opacity = "0";

Answer 1

您可以用自己的 css 代码替换 .hide() 和 .show() 以在视觉上隐藏栏:hide 变为 css("opacity", 0) 和 show 变成 css("opacity", 1)。

然后，您将过渡添加到栏中:

.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>

让 css 定义您希望通过附加类隐藏/显示的方式可能会很好。然后，您可以使用 addClass("is-hidden") 和 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>