Activate class=”animate__animated animate__bounce” on click Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Activate class=”animate__animated animate__bounce” on click without wasting too much if your time.

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>
We are here to answer your question about Activate class=”animate__animated animate__bounce” on click - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji