添加另一个带动画的类后，将类添加到 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

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

Answer 2

首先，您需要删除现有类并向其添加新类。您首先使用现有类添加了一个类，因此它将被附加，然后在您尝试删除该类"imageone"之后，该类不会被删除。因此，请尝试先删除 imageone 并添加移动类。为 img 元素提供一个 Id，然后执行类似操作。

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

Answer 3

请尝试此代码。

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