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

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

我使用的是網站上的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); 
    } 
}

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

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

任何幫助，將不勝感激。

感謝

來源

2012-01-27 Richard Le Poidevin

在jsFiddle中展示的一個例子會非常的豐富。 – 2012-01-27 22:59:12

嘗試使用$.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中重新使用它（不需要重新聲明）。

來源

2012-01-27 23:05:01 Benno

我需要做一些微調，並添加停止到showNav函數或者它們相互衝突。我還爲#primary和#lightbox添加了一個hover事件，用於清除超時並停止事件傳播，以便在鼠標懸停時可以看到它們 – 2012-01-30 09:04:42

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

回答

相關問題