Как сделать анимацию на jQuery, чтобы при повторном клике происходило обратное действие?

Question

[winterlich]

Добрый день! Начинаю изучать jQuery (необходимо сделать конкретную анимацию для сайта), но мой код не работает. Нужно, чтобы при клике на кнопку два элемента разъезжались в стороны (один из них эта кнопка) и третий появлялся между ними, но также чтобы при повторном клике все возвращалось на место, и так до бесконечности. Заранее благодарю за помощь, вот мой код:

$(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);
    }
           
          });
     });

Comments

[Максим]

все на цсс делайте - тогда получится

[Ярослав Иванов]

Зачем в 2020-ом использовать jquery ?

Начинаю изучать jQuery

Зачем ? jquery решала проблему кроссбраузерности и отсутствие ряда функционала. Сейчас такой проблемы давно нет. Нативный javascript умеет все то, что делает jquery.

[winterlich]

Ярослав Иванов, спасибо за ответ. Java пока не владею к сожалению, Jquery показался более простой альтернативой.

[Ярослав Иванов]

winterlich, youmightnotneedjquery.com

Answer 1

[Дуболом Одноклеточный]

Скобки проставь в операторах и убери функции!:

$(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);
    }
          });
     });

Анимации на jquery - это сложно и никому не нужно, проще делать это с помощью движков анимаций gsap (GreenSock Animation Platform)
--или--
anime.js
Это движки для анимаций, но есть и вещи более проще, для соответственно более простых анимаций. Например: css @keyframes