jquery each add class with delay inbetween

Question

I need to loop through each div .row to add or remove a flip class that has a CSS3 3D transform effect.

When I apply this add/remove class to each \".row\" with jquery e

Answer 1

The jQuery delay() method only delays the next pieces in the queue of strung together methods using $(obj).delay(500).addClass('flip'); It doesn't delay all subsequent lines of code. (check out the first example and how the code runs its animations side-by-side)

Try using setTimeout() instead.

$('.row').each(function(i){
  var row = $(this);
  setTimeout(function() {
    row.toggleClass('flip');
  }, 500*i);
});​

Fiddle