Jquery 通过切换汉堡菜单，淡入淡出覆盖

所以我正在开发一个网站，它使用汉堡包菜单。单击后，此汉堡包菜单将显示带有菜单选项的全屏覆盖

我想这个覆盖淡入时，汉堡菜单是点击和淡出一旦再次点击

目前，我已经能够通过向overlay菜单添加活动类和添加以下CSS使overlay淡入淡入：

.overlay {

  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 1s, visibility 1s;
  transition: opacity 1s, visibility 1s;

}

.overlay.open {

visibility: visible;
opacity: 1;
z-index: 50;

}

但是，当再次单击切换时，我不知道如何使覆盖淡出

如果你们想查看一个工作示例，这里是开发站点：

---

谢谢

使用此jquery代码使fadein/fadeout生效

 var x=true;
    $('.button_container').click(function(){
    if(x){
    $('.overlay').fadeOut(1000);x=false;}
    else{
    $('.overlay').fadeIn(1000);x=true;}

    });

---

使用此jquery代码可以使淡入淡出效果

 var x=true;
    $('.button_container').click(function(){
    if(x){
    $('.overlay').fadeOut(1000);x=false;}
    else{
    $('.overlay').fadeIn(1000);x=true;}

    });

---

当

可见性更改为
隐藏时，您需要为其添加延迟，否则它将在动画完成前消失：

.overlay{
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s, visibility 0s 1s;
}

.overlay.open{
  visibility: visible;
  opacity: 1;
  transition: opacity 1s;
}

Fiddle:
当
可见性更改为
隐藏时，您需要为其添加延迟，否则它将在动画完成之前消失：

.overlay{
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s, visibility 0s 1s;
}

.overlay.open{
  visibility: visible;
  opacity: 1;
  transition: opacity 1s;
}

小提琴：
替换
过渡：不透明度1s，可见性1s转换的覆盖类中的code>：所有1
替换
转换：不透明度1s，可见性1s转换的覆盖类中的code>：所有1
z-index
属性不可设置动画，因此在打开和未打开的导航覆盖上都需要该属性才能看到其他动画。（这类似于将元素设置为
display:none
，并想知道为什么动画不可见。）

将
z-index
从
.overlay.open
类移动到主
.overlay
类可以解决此问题。
z-index
属性不可设置动画，因此在打开和未打开的导航覆盖上都需要该属性才能查看其他动画。（这类似于将元素设置为
display:none
，并想知道为什么动画不可见。）

将
z-index
从
.overlay.open
类移动到主
.overlay
类可以解决此问题。
您的代码中没有包含此项，但在网站上我注意到，要查看仅出现在
.overlay.open
上的导航覆盖，需要一个
z-index
属性。将这个
z-index
移动到你的主
。覆盖
类，一切都应该正常。试试@ShengSlogar-Hi-Chen，这是正确的答案。我不知道这是造成问题的原因。我将编辑问题，以便您可以添加答案！如果知道为什么z指数也是问题的原因，那就太酷了。谢谢@约翰，很高兴你成功了！您不必进行编辑，但我会将其完全复制到答案中，以便您可以将其标记为已解决。：）您的代码中没有包含这一点，但在网站上我注意到一个
z-index
属性需要查看导航覆盖，该属性仅出现在
.overlay.open
上。将这个
z-index
移动到你的主
。覆盖
类，一切都应该正常。试试@ShengSlogar-Hi-Chen，这是正确的答案。我不知道这是造成问题的原因。我将编辑问题，以便您可以添加答案！如果知道为什么z指数也是问题的原因，那就太酷了。谢谢@约翰，很高兴你成功了！您不必进行编辑，但我会将其完全复制到答案中，以便您可以将其标记为已解决。：）