Question

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

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。您可以获得鼠标停止事件here

的插件

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

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

jQuery show

jQuery hide

Answer 3

在jQuery中没有用于mousemove结尾的本机事件，但你可以在互联网上使用一些各种jQuery插件进行鼠标停止，如

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

然后，你可以这样做：

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

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

jQuery mousemove：只有当鼠标移动时才会出现导航栏

3 个答案: