点击菜单上的淡入淡出

我在尝试让菜单淡入点击时遇到了一些小问题，一旦我点击关闭按钮，淡出就会发挥作用。当我添加淡入淡出脚本（以下是我正在使用的）时，它显示了一个奇怪的淡入淡出故障，可以在这里看到https://jsfiddle.net/7u6q6jzu/3/。会发生什么似乎菜单被加载，然后添加淡入淡出脚本。我使用错误的脚本还是错过了某些东西？任何帮助都会很棒。点击菜单上的淡入淡出

$(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); 
});

来源

2016-08-01 bigant841

它看起来像组合css'过渡'和jQuery转换 –

只是删除你的过渡时间

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

fiddle example

删除过渡

-webkit-transition: all 0.3s ease-out; 
     -moz-transition: all 0.3s ease-out; 
     -ms-transition: all 0.3s ease-out; 
     -o-transition: all 0.3s ease-out; 
     transition: all 0.3s ease-out;

发生什么事是你申请微博同时淡化效果和过渡。所以你会得到“双重褪色”效果。删除转换摆脱这一点，只适用于你正常的淡出/在效果

来源

2016-08-01 13:44:00

ehm，你不是指转换吗？ –

正确！谢谢@Pepo_rasta –

@ÖzgürErsil我完全忘了我已经有了。谢谢 – bigant841

点击菜单上的淡入淡出

回答

相关问题