CODEWITHSUNDEEP
javascriptjqueryhtmlcss
bigant841
bigant841

Reputation: 48

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 https://jsfiddle.net/7u6q6jzu/3/. 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() {
          $(".overlay").fadeIn(1000);
      });
      $(".close-overlay").click(function() {
          $(".overlay").fadeOut(1000);
      });

 });

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"]');

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

Upvotes: 0

Views: 2380

Answers (1)

Özgür Ersil
Özgür Ersil

Reputation: 7013

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

Upvotes: 4

Related Questions