Using animate.css and jQuery for sequential animations

Question

Using animate.css and jQuery for sequential animations

Is there a way to make them fadeInUp one after the other?

Check out the demo http://jsfiddle.net/uz2rm8jy/4/

Here is the HTML structure:

<div class="c one"></div>

<div class="c two"></div>

<div class="c three"></div>

This is the JavaScript code I am using:

$(function() {
$('.c').each(function(i) {
$(this).delay((i++) * 150).addClass('fadeInUp'); })
});

javascript jquery css

Answer 1

Answer №1

To accomplish this task, you can utilize jquery's fadeTo function by following the same method you are currently using...

$(function() {
  $('.c').each(function(i) {
  $(this).delay((i++) * 150).fadeTo(500,1); })
});

$(function() {
$('.c').each(function(i) {
$(this).delay((i++) * 150).fadeTo(500,1); })
});

.one,.two,.three {
    height: 50px;
    background: #dddddd;
    width: 50px;
    border-radius: 50%;
    display:inline-block;
    margin: auto 10px;
    opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="c one"></div>

<div class="c two"></div>

<div class="c three"></div>

Answer 2

To accomplish this task, you can utilize jquery's fadeTo function by following the same method you are currently using...

$(function() {
  $('.c').each(function(i) {
  $(this).delay((i++) * 150).fadeTo(500,1); })
});

$(function() {
$('.c').each(function(i) {
$(this).delay((i++) * 150).fadeTo(500,1); })
});

.one,.two,.three {
    height: 50px;
    background: #dddddd;
    width: 50px;
    border-radius: 50%;
    display:inline-block;
    margin: auto 10px;
    opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="c one"></div>

<div class="c two"></div>

<div class="c three"></div>

Answer 3

Answer №2

The question originally centered around the Animate.css library; however, the provided answers did not offer assistance with animate.css. I encountered the same issue and eventually found a solution. You can view the solution in the following JSFiddle link: JSFiddle

Here is the example HTML code:

<div class="content">
  <div class="firstanimation">
    <h1 data-animation="fadeInUp" style='display: none'>
      This is Title
    </h1>
  </div>
  <div class="secondanimation">
    <p data-animation="wobble" style='display: none'>
      This is Description
    </p>
  </div>
  <div class="lastanimation">
    <p data-animation="bounce" style='display: none'><a href="#">Link</a></p>
  </div>
</div>

jQuery section:

// With Queue
function animate2(queue) {
  if (queue && queue.length > 0) {
    var elm = queue.shift();

    var animClass = "animated " + $(elm).data('animation');

    $(elm).show().addClass(animClass)
      .on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $(elm).removeClass();
        animate2(queue);
      });
  }
};



$(function() {
  var animationQueue = [
    $('.content').find('.firstanimation h1'),
    $('.content').find('.secondanimation p'),
    $('.content').find('.lastanimation p')
  ];

  animate2(animationQueue);
});

Answer 4

The question originally centered around the Animate.css library; however, the provided answers did not offer assistance with animate.css. I encountered the same issue and eventually found a solution. You can view the solution in the following JSFiddle link: JSFiddle

Here is the example HTML code:

<div class="content">
  <div class="firstanimation">
    <h1 data-animation="fadeInUp" style='display: none'>
      This is Title
    </h1>
  </div>
  <div class="secondanimation">
    <p data-animation="wobble" style='display: none'>
      This is Description
    </p>
  </div>
  <div class="lastanimation">
    <p data-animation="bounce" style='display: none'><a href="#">Link</a></p>
  </div>
</div>

jQuery section:

// With Queue
function animate2(queue) {
  if (queue && queue.length > 0) {
    var elm = queue.shift();

    var animClass = "animated " + $(elm).data('animation');

    $(elm).show().addClass(animClass)
      .on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $(elm).removeClass();
        animate2(queue);
      });
  }
};



$(function() {
  var animationQueue = [
    $('.content').find('.firstanimation h1'),
    $('.content').find('.secondanimation p'),
    $('.content').find('.lastanimation p')
  ];

  animate2(animationQueue);
});

Answer 5

Answer №3

There are a couple of options available to you.

You can utilize transition end events, which can be triggered with JavaScript.
An alternative option is to incorporate transition delays.

You can listen for transition end events on any element that has a transition. To execute a function once the transition has ended, you can do the following:

element.addEventListener( "transitionend", function() {
    // Insert code here to add a class to the next element
});

It is important to remember to include any necessary prefixes, but jQuery can simplify this process. You can easily accomplish this by using a for loop.

Another approach, which does not require additional JavaScript or transition end events, involves delaying the transitions of .c.two and .c.three by the duration of the actual transition (and double that for .c.three). This can be implemented directly in the CSS by utilizing the transition-delay property on the corresponding elements.

I trust this information proves beneficial to you.

Answer 6

There are a couple of options available to you.

You can utilize transition end events, which can be triggered with JavaScript.
An alternative option is to incorporate transition delays.

You can listen for transition end events on any element that has a transition. To execute a function once the transition has ended, you can do the following:

element.addEventListener( "transitionend", function() {
    // Insert code here to add a class to the next element
});

It is important to remember to include any necessary prefixes, but jQuery can simplify this process. You can easily accomplish this by using a for loop.

Another approach, which does not require additional JavaScript or transition end events, involves delaying the transitions of .c.two and .c.three by the duration of the actual transition (and double that for .c.three). This can be implemented directly in the CSS by utilizing the transition-delay property on the corresponding elements.

I trust this information proves beneficial to you.

Answer 7

Answer №4

It appears that you were attempting to apply the 'fadeInUp' class to your divs based on your code. However, you may want to consider the following solution for a different approach.

function fade(element){
$(element+":not(:visible):first").fadeIn(function(){
    fade(element);
});
}

To implement this function, simply provide the class 'c' as an argument like so: eg.

fade('.c');

Answer 8

It appears that you were attempting to apply the 'fadeInUp' class to your divs based on your code. However, you may want to consider the following solution for a different approach.

function fade(element){
$(element+":not(:visible):first").fadeIn(function(){
    fade(element);
});
}

To implement this function, simply provide the class 'c' as an argument like so: eg.

fade('.c');

Using animate.css and jQuery for sequential animations

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can I extract particular combinations from a PHP array?

Modify the width of the <nz-date-picker> component from Ng-Zorro

Determining When the Collapse Transition in Material UI 5 is Complete

Using Javascript to dynamically add and remove elements on click

Error 404 in Cordova AJAX请求

Rendering a Subarray using Map in ReactJS

Updating specific data in MongoDB arrays: A step-by-step guide

Node.js post request body is still showing as undefined despite using body-parser

Unable to parse JSON elements using jQuery

Ways to easily modify images using a single button with the help of jq

retrieving data from a different controller through a view

The consistent failure of the 201 status node express API is causing major

Leveraging the power of PHP variables within jQuery code

Next.js triggers the onClick event before routing to the href link

What is the best way to store user data from an Angular App into the Firebase Realtime database?

Adding flair to a fresh element and then removing it upon its inception

Create a new promise within a factory function

Bringing life to web pages through captivating animations when showing and hiding div elements, utilizing the power

CSS overflow property determines whether to display or hide the parts of an element

JS: The for loop will keep iterating even if the condition becomes false