'Activate class="animate__animated animate__bounce" on click

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

javascripthtmlcssonclickcss-animations


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 David Rodriguez

Related Questions