jQuery mousemove：仅在鼠标移动时出现导航栏答案

【问题标题】：jQuery mousemove: have navbar appear only when mouse movesjQuery mousemove：仅在鼠标移动时出现导航栏
【发布时间】：2013-05-09 22:59:25
【问题描述】：

我已经知道如何在 mousemove 上显示导航栏，但我无法弄清楚如何在鼠标停止移动后让它再次消失。

CSS

nav{
  display:none;
}

JavaScript

$(document).mousemove(function(event) {     
  $("nav").css("display", "block");
});

我确信有一个简单的解决方案，但我一直在寻找一段时间无济于事。

谢谢！

【问题讨论】：

它需要多快消失？停止移动后立即？为什么不直接创建一个setTimeout，在 2-3 秒后它会自动消失。网页会不断跟踪鼠标是否在移动，因此它不会消失，除非用户空闲时间超过您选择的时间。
@aug 我刚刚发布了一个类似于您建议的 50 毫秒超时的解决方案。

标签： jquery mousemove

【解决方案1】：

你可以像这样使用超时系统：

var timer;

$(window).on('mousemove', function () {
  $('nav').addClass('show');
  try {
    clearTimeout(timer);
  } catch (e) {}
  timer = setTimeout(function () {
    $('nav').removeClass('show');
  }, 50);
});

使用这样的样式：

nav {
  background: #333;
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: all .5s ease;
}

nav.show {
  opacity: 1;
  visibility: visible;
}

50 毫秒可以根据您想要的灵敏度进行调整。

【讨论】：

这行得通，谢谢。现在只是想办法让它出现和消失得更顺畅一些......
@user1912899 如果你想让它更平滑，我会创建一个具有可见状态的类并在其上使用 CSS 过渡。然后只需切换该类。我不认为你可以将display: none 转换为display: block，但visibility: hidden 和opacity 是可行的选择。
@user1912899 我已经更新了我的答案，让用户更容易（过渡）。为简洁起见，供应商前缀的左侧。 Fiddle Here!
太好了，非常感谢。但是 .fadeIn() 和 .fadeOut() 呢？这不是更容易吗？
@user1912899 .fadeIn() 和 .fadeOut() 可以工作，但您可能必须在每次淡入淡出时调用 .stop()。默认情况下，CSS 可以很好地处理它。

【解决方案2】：

您可以在鼠标移动时注册鼠标停止事件，并在该事件被调用后将其删除。由于您使用的是 jQuery，因此您也可以使用 .show() 和 .hide() 而不是直接更改 css。你可以得到一个鼠标停止事件的插件here

$(document).mousemove(function(event){     
    $("nav").show();
    $(document).mousestop(function(e) {
        $("nav").hide();
        $(document).unbind('mousestop');
    });
});

如果您决定使用 .show 和 .hide，您应该查看 api 文档。使用一些额外的参数，您可以通过漂亮的动画轻松显示和隐藏，而不是瞬间出现和消失

jQuery show

jQuery hide

【讨论】：

【解决方案3】：

在 jQuery 中没有原生事件用于鼠标移动的结束，但是你可以在网上使用一些不同的 jQuery 插件来实现 mousestop，比如

http://www.jquery4u.com/events/writing-mousestop-event-plugin-jquery/

然后，你可以这样做：

$(document).mousemove(function(event){     
    $("nav").show();
});

$(document).mousestop(function(e) {
    $("nav").hide();
});

【讨论】：