Recently, I created a button that triggers the addition of a class with animation to an image upon clicking. Now, I am trying to make another button add a different class to revert the image back to its original size. However, the second class doesn't seem to be getting added properly. Even after attempting to remove the previous class, it remains stubbornly stuck on the image.
Is there any way to successfully apply the second class to the image?
$(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>