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);
}
}

另外，我会从var函数中的var hide = ...删除mousemove。如果hide是全局变量，只需在mousemove中重用它（不需要重新声明）。

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

1 个答案: