Why won't my side navigation menu hide with this jquery slide effect?

Question

I have a side navigation menu (on this page: http://layouthuprising.org/about.php ) that slides into view when the user clicks on the menu button at the top right of the screen (the menu button appears when the browser window is narrower than 900px). I want to code it so that when the user presses the "Close x" button, the side navigation menu slides out of view, just like the way it slides in. I tried using this jquery animation:

$(mySidebar).hide('slide', {direction: 'left'}, 1000);

And I tried this jquery-triggered css animation:

$(mySidebar).addClass("mySidebar-animate-right");

But neither one seems to work. Is there any to get that side naviation menu to slide out smoothly?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- color change animator -->

<style>

@media (max-width:4000px) and (min-width:980px){
    #mySidebar{display:none !important;}
}

.side_nav_menu_button{
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    text-decoration: none;
    cursor: pointer;
    outline: 0;
    user-select: none;
}

.side_nav_menu_button:hover{
    color: #000!important;
    background-color: #f1f1f1 !important;
}

.side_nav_close_link{
    font-size: 18px; 
    padding: 16px 16px !important; 
}

#mySidebar{
    color: #ffffff! important;
    background-color: #1e324a !important;
    top: 0px;
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    height: 100%;
    width: 200px;
    position: fixed!important;
    z-index: 1;
    overflow: auto;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;        
}

.mySidebar-animate-left{
    position:relative;
    animation:animateleft 0.4s
}

.mySidebar-animate-right{
    position:relative;
    animation:animateright 0.4s
}

@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}    
@keyframes animateright{from{left:0px;opacity:1} to{left:-300px;opacity:0}}     

</style>


<!-- Sidebar on small screens when clicking the menu icon -->
<nav class="mySidebar-animate-left" style="display:none" id="mySidebar">
  <a href="javascript:void(0)" onclick="closeSideNav()" class="side_nav_close_link side_nav_menu_button">Close ×</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/about.php">ABOUT US</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/ourwork.php">OUR WORK</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/news.php">NEWS</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/resources.php">RESOURCES</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/stories.php">STORIES</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/contribute.php">CONTRIBUTE</a>
</nav>


<script>

// Toggle between showing and hiding the sidebar when clicking the menu icon
var mySidebar = document.getElementById("mySidebar");

function openSideNav() {
  if (mySidebar.style.display === 'block') {
    mySidebar.style.display = 'none';
  } else {
    mySidebar.style.display = 'block';
  }
}

// Close the sidebar with the close button
function closeSideNav() {
    //$(mySidebar).hide();
    //$(mySidebar).removeClass("mySidebar-animate-left");
    //$(mySidebar).addClass("mySidebar-animate-right");
    //$(mySidebar).hide('slide', {direction: 'left'}, 1000);
    //$(mySidebar).toggle('slide',{direction:'left'}, 300);
    mySidebar.style.display = "none";
}


</script>

Answer 1

Try that

.mySidebar-animate-left {
   position: fixed;
   left: 0;}



.mySidebar-animate-right {
    position: fixed;
    left: -300px;}

function openSideNav() {
    $(mySidebar).removeClass("mySidebar-animate-right");
    $(mySidebar).addClass("mySidebar-animate-left");
}

// Close the sidebar with the close button
function closeSideNav() {

    $(mySidebar).removeClass("mySidebar-animate-left");
    $(mySidebar).addClass("mySidebar-animate-right");
}

You can remove @keyframes part. Easiest way to animate things in CSS and JS is just changing its CSS properties (like left, right, width etc) by JavaScript and adding transition property to the element. You can do it by removing/adding new class or just changing specific css property.