在Firefox中失败

Question

Hi i want to put this code in my website, but when i try to click on the menu button in Firefox it pops up then the background changes from the normal color to white (or is gone).

http://jsfiddle.net/Xroad/3pn2pkt6/19/

 $('.toggle-menu').click(function (e) { e.preventDefault(); $('h4.toggle-menu').text($(this).text() == 'Menu' ? 'Close' : 'Menu'); $('.circle').toggleClass('Opacity'); $('#overlay-menu').delay(5000).toggleClass('Opacity'); $('.circle').toggleClass('open'); }); 

 html, body { height: 100%; } body { background: #fffdee; } .circle { position: fixed; top: -50%; left: -50%; height: 50%; width: 50%; border-radius: 50%; background: #98694d; opacity: 0; -webkit-transition-duration: 0.5s; -webkit-transition-property: all; -webkit-transition-timing-function: ease-in-out; transition: all 0.5s ease-in-out; z-index: 1; } .open { top: -50%; left: -50%; width: 200%; height: 200%; } #overlay-menu { position: fixed; top: 0; left: 0; height: 100%; width: 100%; text-align: center; color: black; opacity: 0; z-index: 4; } h4.toggle-menu { position: fixed; top: 20px; right: 70px; color: black; cursor: pointer; z-index: 5; } .Opacity { opacity: 1 !important; visibility: visible; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="circle"></div> <nav id="home-menu" class="menu"> <h4 class="toggle-menu">Menu</h4> </nav> <div id="overlay-menu"><p>MY CONTENT</p></div> 

Answer 1

This works: (small change in the .open-class (added the opacity to it)), and removal of one line in the JS. Tested in Firefox and Chrome

 $('.toggle-menu').click(function (e) { e.preventDefault(); $('h4.toggle-menu').text($(this).text() == 'Menu' ? 'Close' : 'Menu'); //$('.circle').toggleClass('Opacity'); $('#overlay-menu').delay(5000).toggleClass('Opacity'); $('.circle').toggleClass('open'); }); 

 html, body { height: 100%; } body { background: #fffdee; } .circle { position: fixed; top: -50%; left: -50%; height: 50%; width: 50%; border-radius: 50%; background: #98694d; opacity: 0; -webkit-transition-duration: 0.5s; -webkit-transition-property: all; -webkit-transition-timing-function: ease-in-out; transition: all 0.5s ease-in-out; z-index: 1; } .open { top: -50%; left: -50%; width: 200%; height: 200%; opacity: 1; } #overlay-menu { position: fixed; top: 0; left: 0; height: 100%; width: 100%; text-align: center; color: black; opacity: 0; z-index: 4; } h4.toggle-menu { position: fixed; top: 20px; right: 70px; color: black; cursor: pointer; z-index: 5; } .Opacity { opacity: 1 !important; visibility: visible; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="circle"></div> <nav id="home-menu" class="menu"> <h4 class="toggle-menu">Menu</h4> </nav> <div id="overlay-menu"><p>MY CONTENT</p></div>