The continuous cycle of animated effects using animate.css

Question

The continuous cycle of animated effects using animate.css

I've been using animate.css to add animations to my elements, and here's a snippet of the code I'm working with:

<button class='animated infinite pulse tada'>1</button>
<button class='animated infinite pulse tada'>2</button>
<button class='animated infinite pulse tada'>3</button>
<button class='animated infinite pulse tada'>4</button>
<button class='animated infinite pulse tada'>5</button>

Check out the animation on JSFIDDLE

I'm trying to figure out how to animate these buttons one by one in sequence and then have them all animate together before repeating the process infinitely. I saw in the github documentation that you can use Jquery .one function to detect when an animation ends, but I'm not sure how to implement it to achieve what I want.

javascript jquery html css animation

Answer 1

Answer №1

One approach is to utilize the setInterval() function:

var current_button = 0;

setInterval(function()
{
   if(current_button===$('.tada').length)
   {
       $('.tada').addClass('animated');
       current_button=0;
   }
   else
   {
     $('.tada').removeClass('animated');
     $('.tada:eq('+current_button+')').addClass('animated');

     current_button++;
   }
},1000)

Hopefully, this solution proves useful for your needs.

var current_button = 0;

setInterval(function(){
  if(current_button===$('.tada').length){
    $('.tada').addClass('animated');
    current_button=0;
  }else{
    $('.tada').removeClass('animated');
    $('.tada:eq('+current_button+')').addClass('animated');
    current_button++;
  }
},1000)

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='infinite pulse tada'>1</button>
<br/>
<br/>
<button class='infinite pulse tada'>2</button>
<br/>
<br/>
<button class='infinite pulse tada'>3</button>
<br/>
<br/>
<button class='infinite pulse tada'>4</button>
<br/>
<br/>
<button class='infinite pulse tada'>5</button>

Answer 2

One approach is to utilize the setInterval() function:

var current_button = 0;

setInterval(function()
{
   if(current_button===$('.tada').length)
   {
       $('.tada').addClass('animated');
       current_button=0;
   }
   else
   {
     $('.tada').removeClass('animated');
     $('.tada:eq('+current_button+')').addClass('animated');

     current_button++;
   }
},1000)

Hopefully, this solution proves useful for your needs.

var current_button = 0;

setInterval(function(){
  if(current_button===$('.tada').length){
    $('.tada').addClass('animated');
    current_button=0;
  }else{
    $('.tada').removeClass('animated');
    $('.tada:eq('+current_button+')').addClass('animated');
    current_button++;
  }
},1000)

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='infinite pulse tada'>1</button>
<br/>
<br/>
<button class='infinite pulse tada'>2</button>
<br/>
<br/>
<button class='infinite pulse tada'>3</button>
<br/>
<br/>
<button class='infinite pulse tada'>4</button>
<br/>
<br/>
<button class='infinite pulse tada'>5</button>

The continuous cycle of animated effects using animate.css

Answer №1

Similar questions

Having trouble with Ajax POST and CodeIgniter integration?

Using AngularJS, generate a JSON array with a specified key

Extra space at the beginning and inside the body div containers

Dragging the mouse outside of an element after clicking inside

AngularJS: Move forward with controller execution after completion of a looped service method

Any alternatives to setInterval for checking if a file has been modified?

What is the syntax for implementing an if-else statement?

What is the updated technique for creating a full-width HTML section in 2023?

Choose and save data found between line breaks into a list

What is the correct property for accessing and changing the value of a Text node: data or nodeValue?

Having difficulties with the 'client request' function in the latest version of Next.js (13.5.1) - still receiving server-side responses

Why won't my Chrome content script load even though I have the correct syntax and have tried troubleshooting?

Generate dropdown options from JSON data

The issue of Rails 4 serving JavaScript as plain text instead of executing it when attempting to utilize AJAX

The alignment of the Nivo Slider is off-center

Aligning text vertically alongside an image

What is the best way to access the second item using getByRole in React Testing Library when there is no specific name?

Utilizing the dojo.xhrget() Method to Showcase Information in the Dojogrid

Unlocking Extended Functionality in JQuery Plugins

Having trouble directing the focus on an HTML5 element using Javascript and Selenium webdriver