오버레이 탐색 불투명도 변경

Question

오버레이에서 메뉴 표시를 가져 오려고하지만 높이 변경 대신 불투명도 변경 효과를 사용하려고합니다. 나는 여기에서 찾은 코드를 가지고있다. http://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp 그러나 나는 내가 원하는대로 작동하도록 할 수 없다. 높이 0 % -> 100 % 변경을 제거하고 대신 불투명도 0 -> 1을 변경하여 효과를 생성하고 싶습니다.

function openNav() { 
document.getElementById("myNav").style.height = "100%"; 
} 

function closeNav() { 
document.getElementById("myNav").style.height = "0%"; 
} 

나는이 그것을 변경하는 경우 : 메뉴

.overlay { 
height: 100%; 
width: 100%; 
position: fixed; 
z-index: 999; 
top: 0; 
left: 0; 
background-color: rgba(0,0,0, 0.9); 
overflow-y: hidden; 
transition: 0.5s; 
} 

오버레이 (온 클릭하지 버튼) 페이지로드에 표시하지만 때를 :

function openNav() { 
document.getElementById("myNav").style.opacity = "1"; 
} 

function closeNav() { 
document.getElementById("myNav").style.opacity = "0"; 
} 

그리고 내 CSS를 이것 그것을 닫으면 다시 열 수 없습니다.

그 밖의 것들 http://jsfiddle.net/rubixx/ct3ve7pb/1/ 그리고 기본적으로 내가 사용하고있는 것과 동일한 코드가 있지만 높이 변경을 없애고 싶습니다. 단지 불투명도가 오바 레이입니다.

나는 변경이 많이가 아니라 어떤 도움

Answer 1

감사 것 대신 초기 height: 0%의

우리는 오버레이를 숨길 display: none를 사용합니다.

높이를 변경하는 대신 fadeIn/fadeOut을 사용합니다.

업데이트 바이올린 :

http://jsfiddle.net/ct3ve7pb/4/

function openNav() { 
 
    $("#myNav").fadeIn(); 
 
    $("#open-nav").hide(); 
 
} 
 

 
function closeNav() { 
 
    $("#myNav").fadeOut(); 
 
    $("#open-nav").show(); 
 
}

body { 
 
    margin: 0; 
 
    font-family: 'Lato', sans-serif; 
 
} 
 

 
.overlay { 
 
    height: 100%; 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgb(0,0,0); 
 
    background-color: rgba(0,0,0, 1); 
 
    overflow-y: hidden; 
 
    display: none; 
 
} 
 

 
.overlay-content { 
 
    position: relative; 
 
    top: 25%; 
 
    width: 100%; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
.overlay a { 
 
    padding: 8px; 
 
    text-decoration: none; 
 
    font-size: 36px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s; 
 
} 
 

 
.overlay a:hover, .overlay a:focus { 
 
    color: #f1f1f1; 
 
} 
 

 
.closebtn { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 45px; 
 
    font-size: 60px !important; 
 
} 
 
#open-nav { 
 
    background-color: transparent; 
 
    border: none; 
 
    position: absolute; 
 
    top: 34px; 
 
    right: 45px; 
 
    font-size: 38px !important; 
 
    transition-delay: 0.2s; 
 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .overlay {overflow-y: auto;} 
 
    .overlay a {font-size: 20px} 
 
    .closebtn { 
 
    font-size: 40px !important; 
 
    top: 15px; 
 
    right: 35px; 
 
    } 
 
} 
 

 
.open { 
 
    height: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="myNav" class="overlay"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> 
 
    <div class="overlay-content"> 
 
    <a href="#">About</a> 
 
    <a href="#">Services</a> 
 
    <a href="#">Clients</a> 
 
    <a href="#">Contact</a> 
 
    </div> 
 
</div> 
 

 
<button id="open-nav" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</button>