The question is published on by Tutorial Guruji team.
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
Answer
# 1: Missing jQuery.
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.
# 2: Fix Some Code.
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);
});
# 3: Opinion
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>
Result (in Code Snippet)
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>