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: 
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/>**
If you're only targeting Safari/iOS, depending on how important it is to you to control the exact timing of animation sequences, you should maybe avoid any solution that involves JS timeouts. There is no guarantee that the animation will complete at the same time as the timeout delay, particularly on slow processors or machines that have lots of stuff going on in the background. Later versions of webkit (including mobile safari) do allow for timed animation sequences via `@-webkit-keyframes`. Webkit.org has a [nice intro to it](http://www.webkit.org/blog/324/css-animation-2/). It's actually pretty easy to implement.