响应式菜单 jquery

Question

我对这个 jquery 代码有疑问。我想当我点击“openmenu”“closemenu”移动left: 50%而不是left: 85%

$("#openMenu").click(function(){
    $("#closeMenu").animate({left:"50%"}); 

而不是

$("#closeMenu").animate({left:"85%"});

---

代码：

$(document).ready(function(){
  $("#openMenu").click(function(){
    $("#main") .fadeIn(200);
    $("#openMenu").animate({left:"-100%"});
    $("#closeMenu").animate({left:"85%"});
    $(".menu").animate({left:"-1%"},10);
  });

  $("#closeMenu").click(function(){
    $("#main") .fadeOut(200);
    $("#openMenu").animate({left:"3%"});
    $("#closeMenu").animate({left:"100%"});
    $(".menu").animate({left:"-50%"},10);
  });
});

#menuSection{
  height: 100%;
  width: 50%;
  background-color: #e78d3a;
  position: absolute;
  left: 50%;
  background-image: url("../images/background_secondary-home.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
  
#menuSection ul{
  list-style: none;
  margin: 0px;
  padding:0px;
  position: absolute;
  top: 30%;
  left: -1%;
}


#menuSection ul li{
  height: 100px;
  width: 350px;
  font-family:'Poppins', sans-serif;
  font-size: 60px;
  line-height: 100px;
  cursor: pointer;
  font-weight: 600;
}


.menu{
  height: 100px;
  width: 0px;
  background-color: #ff931e;
  display: flex;
  position: absolute;
  left: -50%;
  cursor: pointer;
  pointer-events: none;
  transition: all .5s;
}

#menuSection ul li:hover .menu{
  width: 350px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Pulse Menu -->
<div  class="pulse" id="openMenu">
    <img class="img-responsive icon-menu_open" src="images/icon-menu_open.svg">
</div>
<!--/Pulse Menu -->

<!-- Menu -->
<div id="closeMenu">
    <i class="fa fa-times icon-menu" style="font-size: 25px;color:rgb(238, 238, 238);position: absolute;top: 30%;left: 100%;"></i>
</div>

我是初学者，想知道jquery是否有责任

Answer 1

在您的 jQuery 代码中有第 5 行：

$("#closeMenu").animate({left:"85%"});

尝试将其更改为：

$("#closeMenu").animate({left:"50%"});