Javascript淡入/淡出鼠標移動

Question

我想要一個固定的導航，當鼠標不移動時它會淡出，而當鼠標不移動時它會淡入。

我碰到了另一篇 完成該工作的 文章 ，但是問題是它使用visibility並且我想使用opacity ，這樣我可以通過過渡transition: all .4s ease-in-out;使其淡入和淡出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代碼替換.show() .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僅用於從導航中添加/刪除類。