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类。因此它将位于导航栏的顶部。然后将opacity:.5设置为.nav

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

请参阅更新的小提琴 - https://jsfiddle.net/arvinddhakad/u03ofj16/3/

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

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

Jquery点击菜单淡入淡出

2 个答案: