How to add pause between each iteration of jQuery .each()?

DA. picture DA. · Mar 5, 2011 · Viewed 88.8k times · Source

I'm grabbing an array of jQuery objects and then via .each() modifying each individual jquery with in the array.

In this case I'm updated the class names to trigger a -webkit-transition-property to utilize a css transition.

I'd like there to be a pause before each css transition begins. I'm using the following, but there is no delay in between each update. Instead, they all appear to be updating at once.

function positionCards() {
  $cards = $('#gameboard .card');
  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, 500 )
  });
}

function addPositioningClasses($card){
  $card
    .addClass('position')
}

I was hoping setTimeout would solve this, but it doesn't seem to be working. Is there a way to accomplish the pause before each CLASS name update of each object?

Answer

Rob picture Rob · Mar 5, 2011

I added this as a comment but now that I have read it correctly and answered my own question this would probably work:

function positionCards() {
  var $cards = $('#gameboard .card');

  var time = 500;

  $cards.each(function() {
      setTimeout( function(){ addPositioningClass($(this)); }, time)
      time += 500;
  });
}