制作汉堡包菜单淡出工作

Question

我做了“汉堡包”菜单，反应灵敏的风格，这将覆盖该页面的浏览器是在一个菜单。

我把所有的HTML/CSS想通了，但我想补充淡入和淡出效果。

淡入与jquery代码一起工作，但菜单没有淡出。已经尝试了一些在SO上的想法，但都没有成功。

任何帮助？ 小提琴：https://jsfiddle.net/f19kz640/

对不起坏工程...

HTML

<header> 

    <div id="topbar"> <!-- top bar --> 

      <div id="nav-icon"> 
       <span></span> 
       <span></span> 
       <span></span> 
       <span></span> 
      </div> 

     <div id="menu"> 
      <ul> 
       <li><a href="#">Link1</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link3</a></li> 
       <li><a href="#">Link4</a></li> 
       <li><a href="#">Link5</a></li> 
      </ul> 
     </div> 

    </div> 

</header> 

CSS

body{ 
    background-color: #000; 
} 

#menu{ 
    z-index: 5; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0, 0.95); 
    position: fixed; 
    font-size: 1.5em; 
    text-align: center; 
    right: 0px; 
    top: 0px; 
    opacity: 0; 
    display: table; 
} 

.hidden{ 
    display: none; 
    visibility: none; 
} 

#menu ul{ 
    margin: 0; 
    padding: 0; 
    z-index: 10; 
    width: 100%; 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
} 

#menu ul li{ 
    cursor: pointer; 
    text-decoration: none; 
} 

#menu ul li:hover{ 
    background-color: #006973; 
    -webkit-transition: .15s ease-in-out; 
    -moz-transition: .15s ease-in-out; 
    -o-transition: .15s ease-in-out; 
    transition: .15s ease-in-out; 
} 

#menu ul a{ 
    letter-spacing: 5px; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    color: #fff; 
    list-style: none; 
    text-transform: uppercase; 
    padding: 0px; 
    line-height: 75px; 
    padding: 10px 700px; 
    text-decoration: none; 
} 

#menu ul a:hover{ 
    text-decoration: none; 
    color: #fff ; 
} 

#nav-icon { 
    z-index: 20; 
    width: 50px; 
    height: 35px; 
    position: relative; 
    margin: 35px 30px; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: .5s ease-in-out; 
    -moz-transition: .5s ease-in-out; 
    -o-transition: .5s ease-in-out; 
    transition: .5s ease-in-out; 
    cursor: pointer; 
} 

#nav-icon span { 
    display: block; 
    position: absolute; 
    height: 5px; 
    width: 40px; 
    background: #bada33; 
    opacity: 1; 
    left: 0; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: .25s ease-in-out; 
    -moz-transition: .25s ease-in-out; 
    -o-transition: .25s ease-in-out; 
    transition: .25s ease-in-out; 
} 

/* Icon 3 */ 

#nav-icon span:nth-child(1) { 
    top: 0px; 
} 

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) { 
    top: 12px; 
} 

#nav-icon span:nth-child(4) { 
    top: 24px; 
} 

#nav-icon.open span:nth-child(1) { 
    top: 8px; 
    width: 0%; 
    left: 50%; 
} 

#nav-icon.open span:nth-child(2) { 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

#nav-icon.open span:nth-child(3) { 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

#nav-icon.open span:nth-child(4) { 
    top: 8px; 
    width: 0%; 
    left: 50%; 
} 

使用Javascript/JQuery的

$(document).ready(function(){ 
    $('#nav-icon').click(function(){ 
     $(this).toggleClass('open'); 
     if($('#menu').css('opacity') == '0'){ 
     $('#menu').css('opacity','1'); 
     $('#menu').fadeIn(300).css('display','table'); 
     }else{ 
     $('#menu').css('opacity','0'); 
     $('#menu').fadeOut(300).css('display','none'); 
     } 
    }); 
}); 

Answer 1

你可以容易事情简化了很多：

$(document).ready(function(){ 
    $('#nav-icon').click(function(){ 
     $(this).toggleClass('open'); 
     $('#menu').fadeToggle(300); 
    }); 
}); 

Updated Fiddle

没有理由不透明度性能或显示性能的发挥，这是jQuery的fade()功能的一部分，您只需切换即可。