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

Question

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 1

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

Answer 2

Sorry for digging up an old thread, but this tip could be useful for similar issues:

$cards.each(function(index) {     $(this).delay(500*index).addClass('position'); });