Добавить класс в div после добавления другого класса с анимацией

Question

Я сделал кнопку, которая при нажатии на нее добавит класс с анимацией в изображение. Я сделал еще одну кнопку и хочу добавить еще один класс к изображению, который вернет изображение к его первоначальному размеру. Но второй класс не добавляет в него, я пытался удалить предыдущий класс, но он не удаляется после добавления в изображение.

Любой способ добавить второй класс в изображение?

$(document).ready(function() {
  $('#profile').click(function() {
    $('.imageone').addClass('move');
    $('.imageone').removeClass('imageone');
  })

  $('#back').click(function() {
    $('.imageone').removeClass('move');
    $('.imageone').addClass('goback');
  })
})

.move {
  animation: scale 1s ease-in-out forwards;
  z-index: -1;
}

@keyframes scale {
  from {
    position: relative;
    z-index: -1;
    bottom: 0pt;
  }
  to {
    position: relative;
    bottom: -142pt;
    transform: scale(1.16, 1.23);
    left: 0pt;
    z-index: -1;
    transform-origin: bottom right;
  }
}

.goback {
  animation: goback 1s ease-in-out forwards;
  z-index: -1;
}

@keyframes goback {
  from {
    position: relative;
    bottom: -142pt;
    transform: scale(1.16, 1.23);
    left: 0pt;
    z-index: -1;
    transform-origin: bottom right;
  }
  to {
    position: relative;
    z-index: -1;
    bottom: 0pt;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pageone">
  <img src="images.png" class="imageone" alt="liam">
</div>
<div id="textprofile">
  <a href="#" class="button" id="border">
    <p id="profile">Visit Profile</p>
  </a>
</div>
<p id="back">go back</p>

Answer 1

У вас есть два элемента с одинаковым идентификатором, поэтому, когда вы добавляете прослушиватель событий с помощью селектора идентификаторов, javascript не может обработать такую ​​вещь, потому что вы должны иметь каждый идентификатор только один раз на HTML страницах. Попробуйте изменить свой селектор, а также изменить идентификаторы.

Answer 2

плз попробуйте этот код ..

$(document).ready(function() {
  $('#profile').click(function() {
    $('.imageone').addClass('move');
    $('.imageone').removeClass('goback');
  });

  $('#back').click(function() {
    $('.imageone').removeClass('move');
    $('.imageone').addClass('goback');
  });
});

Answer 3

Сначала вам нужно удалить существующий класс и добавить в него новый класс. Сначала вы добавили класс к существующему, чтобы он был добавлен, а после того, как вы попытаетесь удалить этот класс «imageone», который не будет удален. Поэтому попробуйте сначала удалить imageone и добавить класс перемещения. Укажите идентификатор элемента img и сделайте что-нибудь подобное.

$(document).ready(function() {
  $('#profile').click(function() {
  $('#imageone').removeClass('imageone');
  $('#imageone').addClass('move');
  })

  $('#back').click(function() {
  $('#imageone').removeClass('move');
  $('#imageone').addClass('goback');
  })
 })