CODEWITHSUNDEEP
jquerycssanimation
Martavis P.
Martavis P.

Reputation: 1838

animate each child jquery

It's amazing how simple this should be but I can't get it to work. I'm looking to animate a set of divs one at a time. I am using animate.css for those familiar with it. I thought I may have found the answer here but jsFiddle is not working at the moment. Anywho, the code is

$('.elements').each(function(i) { $(this).addClass('animated slideInLeft').delay(500); });

The problem is that when I debug and step through each element, the animation is happening for each element but when I let it run, it appears to all do it at once. What is needed to actually show the animation one at a time?

Thanks

EDIT:

jsFiddle is back up and that link provided below did not help. The answer did not include looping through elements, but looping the animation itself.

EDIT 2

Here is a Fiddle to play with if you guys need one.

Upvotes: 0

Views: 3233

Answers (1)

Rachid
Rachid

Reputation: 832

$('.elements').each(function(i) {
   delay =(i)*500;
   $(this).delay(delay).animate({
       opacity:1
    }, {
    duration: 500,
    complete: function() {
       $(this).addClass('animated slideInLeft');
    }
  });  
});

Edit: I moved the addClass to the complete property

Can you try this example as well: 

$('.element').hide()

$('.element').each(function(i) {
   delay =(i)*500;
   setTimeout(function (div) {
            div.show().addClass('animated slideInLeft');
        }, delay, $(this));
});

Upvotes: 2

Related Questions