How to toggle .animate function jQuery

Question

I am looking for a way to toggle this animation on click using the .animate function (I'm looking for a solution that doesn't toggle a css class)

What I'm trying to achieve is an overlay menu opened by the button (.about) that toggles the animation of the #header id from 90px width to 100% width and then animates back to 90px width to close

Currently the animation will only play once on click

$(".about").click(function () {

    $("#header").animate({
        width: '100%'
    }, 1000);

    $('footer').addClass("show");

    $("footer").animate({
        opacity: 1
    }, 300);

});


$("footer").click(function () {


     $("footer").animate({
        opacity: 0
     }, 300);


    $("#header").animate({
        width: '90px'
    }, 1000);

});

Does anyone have any suggestions or references for this?

Answer 1

You could have used the old toggle method which takes in multiple handles and loops them on each click. But, since its deprecated, your best shot to achieve the toggle would be the check the width and then set accordingly. Another alternative is to use toggleClass

$("#test").click(function() {
  $(this).animate({
    width: $(this).width() == 90 ? '100%' : 90,
  });
});

div {
  background: red;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="test">
  Test DIV
</div>