Как сделать .toggle из .animate

Question

У меня есть меню гамбургера с анимацией. Когда я снова нажимаю на меню гамбургера (после того, как я уже вышел из меню), меню появляется без анимации.

Я предполагаю, что это вызвано .animate - мне нужно сделать .toggle

$(document).ready(function() {
  $("#openMenu").click(function() {
    $("#main").toggle(200);
    $("#menuSection").toggle(200);
    $(".menu").animate({ left: "2%" });
  });
});

CSS:

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

Answer 1

Я предполагаю, что вы снова щелкаете элемент #openMenu, чтобы вызвать анимацию закрытия меню при его открытии. Повторный вызов .animate, который у вас есть в вашем коде, после стиля элемента .menu, который уже имеет значение left: 2%;, ничего не изменит. Вы должны реализовать код, который будет вызывать анимацию «out» или «in» в зависимости от того, открыто ли меню.

$(document).ready(function() {
    $("#openMenu").click(function() {
        $("#main").toggle(200);
        $("#menuSection").toggle(200);
        var menu = $(".menu");
        if (menu.css("left") == "2%") { //if the "in" animation was already performed
            menu.animate({ left: "0%" }); //revert back to normal
        } else {
            menu.animate({ left: "2%" }); //perform "in" animation
        }
    });
});