bigant841 bigant841 - 2 months ago 8
jQuery Question

Fade in menu on click

I am having a little issue when trying to get my menu to fade in on click, fadeout works once I hit the close button. When I add the fade in script (below is what I am using) it displays a weird fadein glitch which can be seen here What is happen is it seems the menu gets loaded and then the fadein script is then added. Am I using the wrong script or am I missing something? Any help would be great.

$(function() { // Onload
$(".open-overlay").click(function() {
$(".close-overlay").click(function() {


This is my code for my menu. This script opens the menu and uses the scroll bar for overflowing menu instead of using a secondary scrollbar.

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

[], 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);


Just remove your transition time

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

fiddle example

Remove transitions

 -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;

What happens is that you apply both the fade effect and the transition at the same time. So you get a "double fade" effect. Removing transitions gets rid of that and just applies your normal fade out/in effects