在鼠標移動時顯示/隱藏元素

Question

我正在構建一個網站，我希望在移動鼠標之前隱藏某些部分。當鼠標移動時，它們仍然可見，但是，如果它仍然保持幾秒鐘，它們會再次隱藏。

我使用的是網站上的jQuery，我在準備狀態，我有：

var hide = setTimeout(function() { 
    hideNav(); 
}, 2000); 

$('body').mousemove(function() { 
    clearTimeout(hide); 
    var hide = setTimeout(function() { 
     hideNav(); 
    }, 2000); 
    showNav(); 
}); 

這顯示/隱藏內容

function hideNav() { 
    $('#primary').fadeOut(1000); 
    var lightbox = $('#lightbox'); 
    if (lightbox.length) { 
    lightbox.fadeOut(1000); 
    } 
} 

function showNav() { 
    $('#primary').fadeIn(1000); 
    var lightbox = $('#lightbox'); 
    if (lightbox.length) { 
    lightbox.fadeIn(1000); 
    } 
} 

這種類型的作品，除了超時功能用於隱藏元素最終與該功能作戰以在鼠標移動時顯示它，導致大量閃爍。

編輯：鼠標移動需要在頁面上的任何地方，而不只是當懸停在要顯示/隱藏的元素上。

任何幫助，將不勝感激。

感謝

Answer 1

嘗試使用$.stophttp://api.jquery.com/stop/

如果它在淡出當您移動鼠標的1秒，它應該停止淡出的動畫和淡化回。

function hideNav() { 
$('#primary').stop().fadeOut(1000); 
var lightbox = $('#lightbox'); 
if (lightbox.length) { 
    lightbox.fadeOut(1000); 
} 
} 

function showNav() { 
$('#primary').stop().fadeIn(1000); 
var lightbox = $('#lightbox'); 
if (lightbox.length) { 
    lightbox.fadeIn(1000); 
} 
} 

另外，我會從您的mousemove函數中的var hide = ...中刪除var。如果hide是一個全局變量，只需在mousemove中重新使用它（不需要重新聲明）。