triggering sequential animated.css animation with jQuery

Question

I'm trying to animate elements sequentially by using jQuery. The approach that I'm trying to accomplish is to add "animated fadeInDown" classes on each element that should be animated, with a 500 milisecond delay.

The problem that I'm experiencing is that jQuery (or if I use setTimetout function) will trigger all animations at the same time.

Here's my code:

$('.row-assets .asset').each(function(i) {
    $(this).delay((i++) * 500).addClass('animated').addClass('fadeInDown');
});

What am I doing wrong?

depending on your skill level and available time, maybe check out the GreenSock jQuery animation library - greensock.com — Sam Holguin
– Sam Holguin, Commented Jul 4, 2014 at 16:30

Palpatim · Accepted Answer · 2014-07-04 16:25:18Z

1

addClass() is not part of the jQuery animation queue, and is therefore not affected by delay(). A proper use of setTimeout should work:

DEMO

var addClassToEl = function($el) {
    $el.addClass('animated fadeInDown');
};

$('.row-assets .asset').each(function(i, el) {
    setTimeout(function() {addClassToEl($(el))}, i++ * 500);
});

You'll have to make sure that your classes have appropriate CSS transitions on them if you want to animate their changes.

answered Jul 4, 2014 at 16:25

Palpatim

9,30237 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

triggering sequential animated.css animation with jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related