Sequential animation with animate.css and jquery

Question

How can I make each of them to fadeInUp but in sequence?

demo http://jsfiddle.net/uz2rm8jy/4/

HTML

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

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

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

My js

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

Answer 1

You can achieve that by using jquery's fadeTo using exactly the same logic you have already in place...

$(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

The question is about Animate.css library but the answers are not help with animate.css, I had the same problem and solved it finally. see below fiddle. JSFiddle

code: Html Example

<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:

// 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 3

There are two options for you.

1. Transition end events, which can be fired with JavaScript
2. Transition delays

Transition end events can be listened for on any element that has a transition. You can fire a function when the transition ends like this:

element.addEventListener( "transitionend", function() {
    // run code here to add class on next element
});

You'll have to make sure to add the necessary prefixes, but jQuery can assist. This is easily achieved in a for loop.

The other alternative with no extra JS or transition end events would be to delay the transitions of .c.two and .c.three by the length of the actual transition (and two times that for .c.three ). You can add this directly in the CSS by using the transition-delay property on the respective elements.

I hope this helps.

Answer 4

I'm not sure what you meant, basing on your code, you just wanted to add the class 'fadeInUp' to your divs. But try this maybe it will help.

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

to use the function just pass the class 'c' as an argument: eg.

fade('.c');