How to make an animation in jQuery so that when you click again, the opposite action happens?

Question

JavaScript

Good afternoon! I'm starting to learn jQuery (I need to make a specific animation for the site), but my code doesn't work. It is necessary that when you click on the button, two elements move apart (one of them is this button) and the third one appears between them, but also that when you click again, everything returns to its place, and so on ad infinitum. Thanks in advance for your help, here is my code:

$(document).ready(function(){   
        $("#logoup").click(function(){
        $('#logoup').toggleClass('move');}
                    });

     if      $("#logoup").hasClass('move')(function(){
             $("#logo").animate({top:"-=200"}, "slow");
             $(".menu-main").animate({top:"+=50"}, "slow");
             $("#contact").show(1000);
         
    } else $("#logo").animate({top:"+=200"}, "slow");
              $(".menu-main").animate({top:"-=50"}, "slow");
              $("#contact").hide(1000);
    }
           
          });
     });

Answer 1

Put parentheses in operators and remove functions!:

$(document).ready(function(){   
        $("#logoup").click(function(){
        $('#logoup').toggleClass('move');}
                    });

     if  ( !$("#logoup").hasClass('move') ) {
             $("#logo").animate({top:"-=200"}, "slow");
             $(".menu-main").animate({top:"+=50"}, "slow");
             $("#contact").show(1000);
      }
         
    } else {
              $("#logo").animate({top:"+=200"}, "slow"
              $(".menu-main").animate({top:"-=50"}, "slow");
              $("#contact").hide(1000);
    }
          });
     });

Animations in jquery are complicated and no one needs, it's easier to do it with gsap (GreenSock Animation Platform) animation engines
--or-
anime.js
These are engines for animations, but there are also easier things, for correspondingly simpler animations. For example: css @keyframes