javascript - 桌面菜单可在鼠标移动时淡入，但在移动屏幕尺寸中保持隐藏状态

Question

我需要一个当鼠标停止移动或离开浏览器窗口时淡入的菜单。我目前使用 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);
    });
    }
});