javascript - Fade in menu on click -

i having little issue when trying menu fade in on click, fadeout works once hit close button. when add fade in script (below using) displays weird fadein glitch can seen here https://jsfiddle.net/7u6q6jzu/3/. happen seems menu gets loaded , fadein script added. using wrong script or missing something? great.

 $(function() { // onload       $(".open-overlay").click(function() {           $(".overlay").fadein(1000);       });       $(".close-overlay").click(function() {           $(".overlay").fadeout(1000);       });   }); 

this code menu. script opens menu , uses scroll bar overflowing menu instead of using 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 button class name */      var overlayopen = this.classname === 'open-overlay';       /* toggle aria-hidden state on overlay , no-scroll class on body */      overlay.setattribute('aria-hidden', !overlayopen);      body.classlist.toggle('noscroll', overlayopen);      /* on mobile browser when overlay opened , scrolled, if open again doesn't reset scrolltop property */      overlay.scrolltop = 0;   }, false);  });   

just remove transition time

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

fiddle example

remove transitions

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

what happens apply both fade effect , transition @ same time. "double fade" effect. removing transitions gets rid of , applies normal fade out/in effects