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

If you make a method that calls itself every 500 ms that should do that trick. The following code should work.

var __OBJECTS = [];

$('#gameboard .card').each(function() {
    __OBJECTS.push($(this));
});

addPositioningClasses();

function addPositioningClasses() {
    var $card = __OBJECTS.pop();
    $card.addClass('position');
    if (__OBJECTS.length) {
        setTimeout(addPositioningClasses, 500)
    }
}

Tested on fiddle : http://jsfiddle.net/jomanlk/haGfU/


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

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