Javascript 单击“淡入”菜单

我有一个小问题时，试图让我的菜单淡入点击，淡出工程一旦我点击关闭按钮。当我添加淡入脚本（下面是我正在使用的）时，它会显示一个奇怪的fadein故障，可以在这里看到。发生的情况是，似乎加载了菜单，然后添加了fadein脚本。我是使用了错误的脚本还是遗漏了什么？任何帮助都会很好

 $(function() { // Onload
      $(".open-overlay").click(function() {
          $(".overlay").fadeIn(1000);
      });
      $(".close-overlay").click(function() {
          $(".overlay").fadeOut(1000);
      });

 });

这是我的菜单代码。此脚本打开菜单，并使用滚动条作为溢出菜单，而不是使用辅助滚动条

 var body = document.body,
 overlay = document.querySelector('.overlay'),
 overlayBtts = document.querySelectorAll('div[class$="overlay"]');

[].forEach.call(overlayBtts, function(btt) {
"use strict";
  btt.addEventListener('click', function() { 

     /* Detect the button class name */
     var overlayOpen = this.className === 'open-overlay';

     /* Toggle the aria-hidden state on the overlay and the no-scroll class on the body */
     overlay.setAttribute('aria-hidden', !overlayOpen);
     body.classList.toggle('noscroll', overlayOpen);
     /* On some mobile browser when the overlay was previously opened and scrolled, if you open it again it doesn't reset its scrollTop property */
     overlay.scrollTop = 0;
  }, false);
 });  

---

只需取消过渡时间

.overlay {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
 }

删除过渡

---

发生的情况是，同时应用淡入效果和过渡。所以你得到了“双重淡入”的效果。删除过渡可以消除这一点，只应用正常的淡出/淡入效果

只需删除过渡时间

.overlay {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
 }

删除过渡

---

发生的情况是，同时应用淡入效果和过渡。所以你得到了“双重淡入”的效果。删除过渡可以消除这种情况，只应用正常的淡出/进入效果

它看起来像是将css

过渡

和jQuery过渡结合在一起。它看起来像是将css

过渡

和jQuery过渡结合在一起。嗯，你不是说过渡吗？ÖzgürErsil我完全忘了我有这个功能。感谢you@bigant841快乐的编码嗯，你不是说转换吗？@ÖzgürErsil我完全忘了我有这个。感谢you@bigant841快乐编码