Jquery在单击时淡入菜单

Question

当我点击一个切换 100% 高度和宽度菜单的图标时，我试图实现淡入效果，当我点击 X 时，我会淡出。但是我不确定如何实现这种效果。我设法使它工作的唯一方法是添加一个顶部、底部、左侧和右侧的值，但我不希望它从一侧滑动，而是显示为从 0 到 1 的不透明度变化，并带有过渡。我已将最高值设置为有效，因此您可以看到菜单，但这不是我要找的。​​p>

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

我认为你应该使用内置的 jquery fadeIn，fadeOut

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

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

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

Answer 2

检查您是否正在寻找这个。 将 z-index 添加到 .o1 类。所以它将在导航的顶部。然后将 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>