點擊菜單上的jquery淡入淡出

Question

我試圖實現淡入淡出的效果，當我點擊一個圖標時，切換100％的高度和寬度菜單，淡出時，當我點擊X.但我不確定如何達到這個效果。我設法使其工作的唯一方法是添加頂部，底部，左側和右側的值，但我不希望它從側面滑動，而是在過渡時顯示爲從0到1的不透明度更改。我已經設置了最高的價值，所以你可以看到菜單，但它不是我正在尋找的。

HTML：

<div class="o1"> 
    <div class="o2"></div> 
</div> 

<div class="nav"> 

<div class="out"> 
<div class="x"></div> 
<div class="x2"></div> 
</div> 

<ul> 
    <li class="lione">About Me</li> 
    <li class="litwo">My Portfolio</li> 
    <li class="lithree">My Skills</li> 
    <li class="lifour">Contact Me</li> 
</ul> 
</div> 

CSS：

.nav { 
height: 100vh; 
width: 100vw; 
position: absolute; 
top: -100%; 
/left: -100%; 
/right: -100%; 
/bottom: -100%; 
z-index: 1; 
background-color: #3a3a3a; 
transition: 1s all ease; 
opacity: 0; 
} 

.nav ul { 
list-style: none; 
position: absolute; 
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%); 
} 

.nav li { 
text-align: center; 
color: #81CFE0; 
padding: 10px; 
font-family: 'Quicksand'; 
font-weight: 100; 
} 

.lione { 
border: 1px solid; 
border-right: none; 
border-bottom: none; 
} 

.litwo { 
border: 1px solid; 
border-top: none; 
border-right: none; 
border-bottom: none; 
} 

.lithree { 
border: 1px solid; 
border-top: none; 
border-left: none; 
border-bottom: none; 
} 

.lifour { 
border: 1px solid; 
border-top: none; 
border-left: none; 
} 

.out { 
height: 4vh; 
margin-left: 98%; 
margin-right: 0.5%; 
transition: 1s all ease; 
} 

.x { 
height: 1px; 
background-color: #81cfe0; 
width: 20px; 
transform: rotate(45deg); 
position: absolute; 
top: 15px; 
right: 10px; 
} 

.x2 { 
height: 1px; 
background-color: #81cfe0; 
width: 20px; 
transform: rotate(-45deg); 
position: absolute; 
right: 10px; 
top: 15px; 
} 

.o1 { 
height: 20px; 
width: 20px; 
border-radius: 100%; 
border: 1px solid #81cfe0; 
position: absolute; 
top: 1%; 
right: 1%; 
} 

.open { 
opacity: 1; 
top: 0; 
} 

.o2 { 
height: 13px; 
width: 13px; 
border-radius: 100%; 
border: 1px solid #3a3a3a; 
position: absolute; 
left: 51%; 
top: 51%; 
transform: translate(-50%, -50%); 
transition: 1s all ease; 
} 

JS：

$(function() { 
$('.o1').click(function() { 
    $('.nav').toggleClass('open'); 
}); 

$('.out').click(function() { 
    $('.open').toggleClass('open'); 
}); 
}); 

https://jsfiddle.net/u03ofj16/

Answer 1

檢查，如果你正在尋找這一點。 添加的z-index到.o1 class.So這將是對nav.Then頂部設置opacity:.5到.nav

$(function() { 
 
    $('.o1').click(function() { 
 
     $(this).addClass('hide'); 
 
     $('.nav').toggleClass('open'); 
 
    }); 
 
    
 
    $('.out').click(function() { 
 
     $('.nav').toggleClass('open'); 
 
     $('.o1').removeClass('hide'); 
 
    }); 
 
});

.nav { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    position: absolute; 
 
    /* top: -100%; 
 
    left: -100%; 
 
    right: -100%; 
 
    bottom: -100%;*/ 
 
    top: 0px; 
 
    z-index: 1; 
 
    background-color: #3a3a3a; 
 
    transition: 1s all ease; 
 
    opacity: 0; 
 
} 
 

 
.nav ul { 
 
    list-style: none; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.nav li { 
 
    text-align: center; 
 
    color: #81CFE0; 
 
    padding: 10px; 
 
    font-family: 'Quicksand'; 
 
    font-weight: 100; 
 
} 
 

 
.lione { 
 
    border: 1px solid; 
 
    border-right: none; 
 
    border-bottom: none; 
 
} 
 

 
.litwo { 
 
    border: 1px solid; 
 
    border-top: none; 
 
    border-right: none; 
 
    border-bottom: none; 
 
} 
 

 
.lithree { 
 
    border: 1px solid; 
 
    border-top: none; 
 
    border-left: none; 
 
    border-bottom: none; 
 
} 
 

 
.lifour { 
 
    border: 1px solid; 
 
    border-top: none; 
 
    border-left: none; 
 
} 
 

 
.out { 
 
    /* height: 4vh;*/ 
 
    height:20px; 
 
    margin-left: 98%; 
 
    margin-right: 0.5%; 
 
    transition: 1s all ease; 
 
} 
 

 
.x { 
 
    height: 1px; 
 
    background-color: #81cfe0; 
 
    width: 20px; 
 
    transform: rotate(45deg); 
 
    position: absolute; 
 
    top: 15px; 
 
    right: 10px; 
 
} 
 

 
.x2 { 
 
    height: 1px; 
 
    background-color: #81cfe0; 
 
    width: 20px; 
 
    transform: rotate(-45deg); 
 
    position: absolute; 
 
    right: 10px; 
 
    top: 15px; 
 
} 
 

 
.o1 { 
 
    height: 20px; 
 
    width: 20px; 
 
    border-radius: 100%; 
 
    border: 1px solid #81cfe0; 
 
    position: absolute; 
 
    top: 1%; 
 
    right: 1%; 
 
    z-index:999; 
 
} 
 

 
.open { 
 
    opacity: 1; 
 
    top: 0; 
 
} 
 

 
.o2 { 
 
    height: 13px; 
 
    width: 13px; 
 
    border-radius: 100%; 
 
    border: 1px solid #3a3a3a; 
 
    position: absolute; 
 
    left: 51%; 
 
    top: 51%; 
 
    transform: translate(-50%, -50%); 
 
    transition: 1s all ease; 
 
} 
 
.hide{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <div class="o1"> 
 
     <div class="o2"></div> 
 
    </div> 
 
    
 
<div class="nav"> 
 
    
 
    <div class="out"> 
 
     <div class="x"></div> 
 
     <div class="x2"></div> 
 
    </div> 
 
    
 
    <ul> 
 
     <li class="lione">About Me</li> 
 
     <li class="litwo">My Portfolio</li> 
 
     <li class="lithree">My Skills</li> 
 
     <li class="lifour">Contact Me</li> 
 
    </ul> 
 
</div>

Answer 2

我認爲你應該使用內置jQuery的淡入，淡出

查看更新後的小提琴 - https://jsfiddle.net/arvinddhakad/u03ofj16/3/

$(function() { 
$('.o1').click(function() { 
     $('.nav').fadeIn(1000); 
    }); 

    $('.out').click(function() { 
     $('.nav').fadeOut(1000); 
    }); 
});