jquery - jQuery mousemove：仅在鼠标移动时出现导航栏

Question

我已经想出了如何在 mousemove 上出现导航栏，但是我无法弄清楚如何在鼠标停止移动后让它再次消失。

CSS

nav{
  display:none;
}

JavaScript

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

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

谢谢！

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

50ms 使其可以根据您想要的灵敏度进行调整。

Answer 2

您可以在鼠标移动时注册鼠标停止事件，并在调用该事件后删除该事件。由于您使用的是 jQuery，因此您也可以使用 .show() 和 .hide() 而不是直接更改 css。您可以在此处获取鼠标停止事件的插件

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

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

jQuery 显示

jQuery隐藏

Answer 3

jQuery 中没有用于鼠标移动结束的本机事件，但您可以使用互联网上的一些用于 mousestop 的各种 jQuery 插件，例如

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

然后，您可以执行以下操作：

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

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