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