On click, triggering the class "animateanimated animatebounce" to activate

Question

On click, triggering the class "animateanimated animatebounce" to activate

Just starting to learn html and css and came across this awesome library:

Here's the code snippet I have so far:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

You can see how it looks on my CodePen here: https://codepen.io/wmfznuiy-the-looper/pen/jOaMXXg

NUESTROS SERVICIOS

I'm trying to make the effect trigger on click. I tried using this code but didn't get the desired outcome:

$("#hola").click(function() {
  $('.animate__animated .animate__bounce-active').toggleClass('.animate__animated .animate__bounce-active');
});

I've gone through multiple posts and guides but still couldn't figure it out. Any help would be greatly appreciated as I'm new to this. Thank you!

javascript html css onclick css-animations

Answer 1

Answer №1

# 1: jQuery Troubleshooting.

If you're encountering the error ReferenceError: $ is not defined in your CodePen console, it indicates a missing jQuery import. Ensure to import jQuery either through CodePen's settings or manually from jQuery's CDN.

# 2: Code Adjustment.

The initial code snippet attempts to toggle the class on elements with the specified selector when a particular element is clicked. Here's an updated version that adds and removes classes more effectively:

$('#hola').click(function () {
  $(this).addClass('animate__animated animate__bounce');
  setTimeout(() => {
    $(this).removeClass('animate__animated animate__bounce');
  }, 1000);
});

# 3: Thoughts.

Upon experimenting, it seems that applying animations directly to anchor tags like <a> may not be fully supported. Consider using other elements such as <h1>. Feel free to correct any oversight or share insights.

Result (in Code Snippet)

P/s: The demonstration below uses <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>

Answer 2

# 1: jQuery Troubleshooting.

If you're encountering the error ReferenceError: $ is not defined in your CodePen console, it indicates a missing jQuery import. Ensure to import jQuery either through CodePen's settings or manually from jQuery's CDN.

# 2: Code Adjustment.

The initial code snippet attempts to toggle the class on elements with the specified selector when a particular element is clicked. Here's an updated version that adds and removes classes more effectively:

$('#hola').click(function () {
  $(this).addClass('animate__animated animate__bounce');
  setTimeout(() => {
    $(this).removeClass('animate__animated animate__bounce');
  }, 1000);
});

# 3: Thoughts.

Upon experimenting, it seems that applying animations directly to anchor tags like <a> may not be fully supported. Consider using other elements such as <h1>. Feel free to correct any oversight or share insights.

Result (in Code Snippet)

P/s: The demonstration below uses <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>

Answer 3

Answer №2

Oh my goodness, thank you immensely! I am overjoyed because I thought nobody would help me since this is my first post. After countless attempts, I finally discovered the reason why none of the other codes were functioning - as you pointed out, I was using the anchor tag. Animate.style provides documentation stating that the best approach for achieving my goal is by utilizing this code snippet:

const animateCSS = (element, animation, prefix = 'animate__') =>
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);
    
    node.classList.add(`${prefix}animated`, animationName);

    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });

However, what they failed to mention is that this method does not work with the anchor tag, which explained why it wasn't working for me. Your solution worked perfectly, although it required a switch to H1 instead. I hoped to use it with the anchor tag, but alas, that's just how it goes. Thank you once again for your invaluable assistance!

Answer 4

Oh my goodness, thank you immensely! I am overjoyed because I thought nobody would help me since this is my first post. After countless attempts, I finally discovered the reason why none of the other codes were functioning - as you pointed out, I was using the anchor tag. Animate.style provides documentation stating that the best approach for achieving my goal is by utilizing this code snippet:

const animateCSS = (element, animation, prefix = 'animate__') =>
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);
    
    node.classList.add(`${prefix}animated`, animationName);

    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });

However, what they failed to mention is that this method does not work with the anchor tag, which explained why it wasn't working for me. Your solution worked perfectly, although it required a switch to H1 instead. I hoped to use it with the anchor tag, but alas, that's just how it goes. Thank you once again for your invaluable assistance!

On click, triggering the class "animateanimated animatebounce" to activate

Answer №1

# 1: jQuery Troubleshooting.

# 2: Code Adjustment.

# 3: Thoughts.

Result (in Code Snippet)

Answer №2

Similar questions

What is the best way to ensure a DOM element exists before you can start manipulating it?

Receiving a 200 response code, however the controller's store() method is not being accessed

Could you explain the purpose of the app.use(cors()) function call?

Setting the default date in angular-bootstrap-datetimepicker: a step-by-step guide

Enhance the current menu item in WordPress by assigning a class to the anchor tag

What could be the reason my page is not refreshing after submitting a form?

JavaScript: The most efficient method for locating a Regular Expression within an Object's properties

When the enter key is pressed in the input box, the page resets instead of triggering

What is the best method for dynamically loading CSS using JavaScript?

Issue with CKEditor within a ColorBox dialog box

Tips for Retrieving Information from Firebase in an Angular Application

What could be causing the browser.get method to fail to redirect to the specified URL?

Typescript Class Getting Vacant

Animate custom scrollbars with jQuery for a unique browsing experience

Transfer data from a div to JavaScript

Adding Quasar to Your Nuxt App: A Step-by-Step Guide

Retrieve the session variables in a controller while making an ajax request

Error in Internet Explorer when using SyntaxHighlighter and jQuery - "Property 'slice' cannot be accessed: object is null or undefined"

Influence of Asynchronous State on the Conditional Visibility of an Element

Is there a way to maintain formdata between components in Angular?

On click, triggering the class "animate__animated animate__bounce" to activate

Answer №1

# 1: jQuery Troubleshooting.

# 2: Code Adjustment.

# 3: Thoughts.

Result (in Code Snippet)

Answer №2

Similar questions

What is the best way to ensure a DOM element exists before you can start manipulating it?

Receiving a 200 response code, however the controller's store() method is not being accessed

Could you explain the purpose of the app.use(cors()) function call?

Setting the default date in angular-bootstrap-datetimepicker: a step-by-step guide

Enhance the current menu item in WordPress by assigning a class to the anchor tag

What could be the reason my page is not refreshing after submitting a form?

JavaScript: The most efficient method for locating a Regular Expression within an Object's properties

When the enter key is pressed in the input box, the page resets instead of triggering

What is the best method for dynamically loading CSS using JavaScript?

Issue with CKEditor within a ColorBox dialog box

Tips for Retrieving Information from Firebase in an Angular Application

What could be causing the browser.get method to fail to redirect to the specified URL?

Typescript Class Getting Vacant

Animate custom scrollbars with jQuery for a unique browsing experience

Transfer data from a div to JavaScript

Adding Quasar to Your Nuxt App: A Step-by-Step Guide

Retrieve the session variables in a controller while making an ajax request

Error in Internet Explorer when using SyntaxHighlighter and jQuery - "Property 'slice' cannot be accessed: object is null or undefined"

Influence of Asynchronous State on the Conditional Visibility of an Element

Is there a way to maintain formdata between components in Angular?

On click, triggering the class "animateanimated animatebounce" to activate