My jquery code is not working as I want it to. When I click on "openmenu", I would like "closemenu" to move to left: 50% instead of left: 85%
$("#openMenu").click(function(){
$("#closeMenu").animate({left:"50%"});
rather than
$("#closeMenu").animate({left:"85%"});
Code:
$(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>I am new to coding and I would like to understand the role of jquery in this scenario.