桌面菜单在鼠标移动时淡入但隐藏在移动屏幕尺寸中

Question

我需要一个在鼠标停止移动或离开浏览器时淡入的菜单 window。我目前使用 css 媒体查询隐藏了桌面菜单。问题是，当我执行这段代码时，尽管有媒体查询，但桌面版本（768px 以上）还是出现了。有什么建议吗？

 $(function() {
  
  var timer;

  $(window).on('mousemove', function () {
    $('.hide-for-video').addClass('show');
    try {
   clearTimeout(timer);
    } catch (e) {}
    timer = setTimeout(function () {
   $('.hide-for-video').removeClass('show');
    }, 1500);
  });
  
 });

.hide-for-video {
  display: none;
  visibility: hidden;
  opacity: 0;
  transition: all 1s ease; }
.hide-for-video.show {
  display: block;
  opacity: 1;
  visibility: visible; }

#menu {
  display: none;
 }
#menu-mobile {
  display: block;
 }



/* Larger Than 768px */
@media only screen and (min-width : 768px) {
 #menu {
  display: block;
 }
 #menu-mobile {
  display: none;
 }
 .hide-for-video.show {
   opacity: 1;
   visibility: visible;
 }
}

<!--Desktop Menu 
===========================================-->
  
<nav id="menu" class="hide-for-video" >
</nav>


<!--Mobile Menu 
===========================================-->

<nav id="menu-mobile" class="" >
</nav>

Answer 1

$(函数() {

    var timer;
    if($(window).width() > 723){
    $(window).on('mousemove', function () {
      $('.hide-for-video').addClass('show');
      try {
        clearTimeout(timer);
      } catch (e) {}
      timer = setTimeout(function () {
        $('.hide-for-video').removeClass('show');
      }, 1500);
    });
    }
});

桌面菜单在鼠标移动时淡入但隐藏在移动屏幕尺寸中

Desktop menu to Fade In on mouse movement yet stay hidden in mobile screen size

javascript

mobile

menu

media-queries