鼠标移动时显示/隐藏元素

Show / hide elements on mouse move

本文关键字：隐藏 元素 显示 移动 鼠标      更新时间：2023-09-26

我正在构建一个网站，希望在移动鼠标之前隐藏某些部分。当鼠标移动时，它们仍然可见，但是，如果鼠标静止几秒钟，它们就会再次隐藏起来。

我在网站上使用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);
  }
}

这种方法很有效，只是隐藏元素的超时最终会与鼠标移动时显示元素的功能发生冲突，导致大量闪烁。

编辑：鼠标移动需要针对页面上的任何位置，而不仅仅是当鼠标悬停在要显示/隐藏的元素上时。

如有任何帮助，我们将不胜感激。

感谢

尝试使用$.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中重用它（不需要重新声明）。

相关文章：