时间戳

首页 > 解决方案 > 添加另一个带有动画的类后将类添加到 div

javascript - 添加另一个带有动画的类后将类添加到 div

问题描述

我做了一个按钮，当我按下它时，它会在图像中添加一个带有动画的类。我制作了另一个按钮，我想向图像添加另一个类，它将图像恢复到原始大小。但是第二个类没有添加到其中，我试图删除上一个类，但是添加到图像后它是不可删除的。

有什么方法可以将第二类添加到图像中？

$(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>

标签： javascriptjqueryhtmlcss

解决方案

您有两个具有相同 ID 的元素，因此当您使用 ID 选择器添加事件侦听器时，javascript 无法处理这样的事情，因为您应该在 HTML 页面中每个 ID 只有一次。尝试更改您的选择器并更改 ID。

推荐阅读