отмена действий анимации в .on(click)

Question

подскажите начинающему программисту, мать его за ногу, как правильно реализовать отмену действия при повторном нажатии клика? пример кода прилагается

$(document).ready(function() {

  var musplmini, musicphotomini, nameplayedtrack, openplayer;

  jQuery('.openplayer').on('click', function() {
    musplmini = jQuery('.musplmini').animate({
      height: "400px"
    })
    musicphotomini = jQuery('.musicphotomini').animate({
      top: '20px',
      left: '50px',
      height: '150px',
      width: '150px',
      borderRadius: '150px'
    })
    nameplayedtrack = jQuery('.nameplayedtrack').animate({
      top: '240px',
      left: '5px',
      height: '40px',
      width: '240px',
      fontSize: '16px'
    })
    openplayer = jQuery('.openplayer').animate({
      top: '383px'
    });
  });
});

/* Плеер мини */

.musplmini {
  position: fixed;
  top: 41px;
  width: 250px;
  height: 40px;
  right: 100px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
  ;
  border-radius: 0px 0px 15px 15px;
}


/* Обложка трека */

.musicphotomini {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 5px;
  left: 10px;
  border-radius: 25px;
  overflow: hidden;
  animation: 5s linear 0s normal none infinite running rot;
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* Название трека */

.nameplayedtrack {
  position: absolute;
  width: 190px;
  height: 20px;
  top: 5px;
  left: 50px;
  color: #000000b4;
  font-size: 12px;
  text-align: center;
}


/* раскрыть плеер */

.openplayer {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 38px;
  left: 115px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="musplmini">
  <div class="openplayer">
    <img src="img/ico/ico-open-player.png"></div>
  <section class="musicphotomini">
    <img src="img/pic.png"></section>
  <span class="nameplayedtrack">
            David Guetta and Bebe Rexha - I'm Good (Blue)
        </span>

</div>

Answer 1

Не претендую на правильный подход, но мне кажется, что уместнее будет играть со стилями, а не с анимацией через jQuery. Так проще, да и не придется нагружать лишними скриптами браузер. Все, что от вас требуется в плане программирования -- по нажатию на кнопку добавлять или убирать класс, который будет индикатором нажатия. А дальше в зависимости от наличия этого класса применять необходимые стили.

Пример:

$(document).ready(function() {
  jQuery('.openplayer').on('click', function() {
    $('.musplmini').toggleClass('clicked');
  });
});

/* Плеер мини */

.musplmini {
  position: fixed;
  top: 41px;
  width: 250px;
  height: 40px;
  right: 100px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
  border-radius: 0px 0px 15px 15px;
  transition: all 1s ease;
}


.musplmini.clicked { /*раскрытый блок*/
  height: 400px;
}


/* Обложка трека */

.musicphotomini {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 5px;
  left: 10px;
  border-radius: 25px;
  overflow: hidden;
  animation: 5s linear 0s normal none infinite running rot;
  transition: all 1s ease;
}

.musplmini.clicked .musicphotomini { /*раскрытый блок*/
  width: 150px;
  height: 150px;
  top: 20px;
  left: 50px;
  border-radius: 150px;
  
}

@keyframes rot {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* Название трека */

.nameplayedtrack {
  position: absolute;
  width: 190px;
  height: 20px;
  top: 5px;
  left: 50px;
  color: #000000b4;
  font-size: 12px;
  text-align: center;
  transition: all 1s ease;
}

.musplmini.clicked .nameplayedtrack {  /*раскрытый блок*/
  width: 240px;
  height: 40px;
  top: 240px;
  left: 5px;
  font-size: 16px;
}


/* раскрыть плеер */

.openplayer {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 38px;
  left: 115px;
  cursor: pointer;
  transition: all 1s ease;
}

.musplmini.clicked .openplayer { /*раскрытый блок*/
  top: 383px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="musplmini">
  <div class="openplayer">
    <img src="img/ico/ico-open-player.png">
  </div>
  <section class="musicphotomini"><img src="img/pic.png"></section>
  <span class="nameplayedtrack">David Guetta and Bebe Rexha - I'm Good (Blue)</span>
</div>

БЛОГ НА HUSL

отмена действий анимации в .on(click)

Ответы (1 шт):