Почему мое боковое навигационное меню не скрывается с помощью этого слайд-эффекта jquery?

Question

У меня есть боковое навигационное меню (на этой странице: http://layouthuprising.org/about.php), которое появляется, когда пользователь нажимает кнопку меню в правом верхнем углу экрана (кнопка меню появляется, когда окно браузера ужечем 900px.) Я хочу закодировать его так, чтобы, когда пользователь нажимает кнопку «Закрыть x», боковое навигационное меню исчезает из поля зрения, точно так же, как оно скользит. Я попытался использовать эту анимацию jquery:

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

И я попробовал эту анимацию css, запускаемую jquery:

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

Но, похоже, ни один из них не работает. Можно ли сделать так, чтобы боковое навигационное меню плавно выдвигалось?

<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

Попробуйте

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

Вы можете удалить часть @keyframes. Самый простой способ анимировать объекты в CSS и JS - просто изменить его свойства CSS (например, влево, вправо, ширина и т. Д.) С помощью JavaScript и добавить свойство перехода к элементу. Вы можете сделать это, удалив / добавив новый класс или просто изменив определенное свойство css.