jQuery 鼠标移动 : have navbar appear only when mouse moves

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 可以根据您想要的灵敏度进行调整。