Question

我希望有一个固定的导航，当鼠标不移动时会淡出，当它移动时会逐渐消失。

我遇到this other post 来完成这项工作，但问题是它使用visibility而我想以{I}的方式使用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>

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>

这是我的去处：

显然，根据需要编辑时间和不透明度。动画本身是纯CSS，JS只用于从导航中添加/删除类。

Javascript淡出鼠标移动

2 个答案: