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

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

尝试使用$.stop http://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 中重用它即可(不需要重新声明)。