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);
});