Given the code snippet below:
<div class="leftBox">
<div class="mainNode" ></div>
</div>
<script type="text/javascript">
$('.mainNode').click(function() {
var element = $('.mainNode');
if (!element.hasClass('show')) {
element.removeClass('hide');
element.addClass('show');
} else {
element.removeClass('show');
element.addClass('hide');
}
})
</script>
In the CSS:
.mainNode {
width: 160px;
height: 160px;
border-radius: 50%;
background-color: red;
position :relative;
}
.show {
-webkit-animation: mymove 1s forwards; /* Safari 4.0 - 8.0 */
animation: mymove 1s forwards;
}
.hide {
-webkit-animation: mymove 1s reverse; /* Safari 4.0 - 8.0 */
animation: mymove 1s reverse;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
I want the circle in the code to move to the bottom when clicked using keyframes.
Once clicked, it should stay at the bottom, which is working as expected with the current code provided.
However, upon clicking again, I would like the circle to animate back to its original position and be able to repeat this action of moving up and down smoothly. Currently, this behavior is not functioning correctly, as the circle jumps abruptly instead of animating.
Any assistance on fixing this issue would be greatly appreciated.