I am learning html and css and I want to use this library: https://animate.style/
I have this code
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
https://codepen.io/wmfznuiy-the-looper/pen/jOaMXXg
NUESTROS SERVICIOS
I want the effect to work when clicking. I used this code but it didn't work
$("#hola").click(function() {
$('.animate__animated .animate__bounce-active').toggleClass('.animate__animated .animate__bounce-active');
});
I have read many post and followed what they say but it is not working. I am new, please help. Thank you
If you open the console in your CodePen, you may see this kind of error:
ReferenceError: $ is not defined
This means you're using jQuery's script without importing them. You can import it whether in CodePen's setting or manually import from jQuery's CDN.
Instead of this, which is find the element which has class .animate__animated .animate__bounce-active toggle add the class to them.
$('#hola').click(function () {
$('.animate__animated .animate__bounce-active').toggleClass(
'.animate__animated .animate__bounce-active'
);
});
Change to this, which add the class to the #hola everytime get clicked and remove those class after a second:
$('#hola').click(function () {
$(this).addClass('animate__animated animate__bounce');
setTimeout(() => {
$(this).removeClass('animate__animated animate__bounce');
}, 1000);
});
This is the element you're targetting. After a few times trying and finding the best solution, I think animate.style doesn't support the animation for the anchor tag. But it works with <h1> and the others. (Correct me if I'm wrong or missed something)
<a id="hola" class="nav-link" href="#nuestros_servicios">NUESTROS SERVICIOS</a>
P/s: This result is using <h1> instead of <a> tag.
$('#hola').click(function () {
$(this).addClass('animate__animated animate__bounce');
setTimeout(() => {
$(this).removeClass('animate__animated animate__bounce');
}, 1000);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
<h1 id="hola" class="nav-link">NUESTROS SERVICIOS</h1>Wow Thank you soooo much I am so happy and I didn't think nobody wanted to help me because it is my first post I had already tried a million of times and the reason all of the other codes didn't work was because of what you said. I was using the anchor tag. Animate.style has documentation and they say the best way to do what I wanted was using this
const animateCSS = (element, animation, prefix = 'animate__') =>
// We create a Promise and return it
new Promise((resolve, reject) => {
const animationName = `${prefix}${animation}`;
const node = document.querySelector(element);
node.classList.add(`${prefix}animated`, animationName);
// When the animation ends, we clean the classes and resolve the Promise
function handleAnimationEnd(event) {
event.stopPropagation();
node.classList.remove(`${prefix}animated`, animationName);
resolve('Animation ended');
}
node.addEventListener('animationend', handleAnimationEnd, {once: true});
});
but they never mentioned this was not going to work with the anchor tag and that's why It was not working. Thank you so much. I tried your solutuion and their solution and they both work but yeah I had to change it for H1. I wished I could use it with the anchor tag but that's the way it is I guess. Thanks