Estoy tomando una matriz de objetos jQuery y luego a través de .each() modificando cada jquery individual en la matriz.
En este caso, actualicé los nombres de clase para activar una propiedad -webkit-transition-property para utilizar una transición css.
Me gustaría que haya una pausa antes de que comience cada transición CSS. Estoy usando lo siguiente, pero no hay demora entre cada actualización. En cambio, todos parecen estar actualizándose a la vez.
function positionCards() { $cards = $('#gameboard .card'); $cards.each(function() { setTimeout( function(){ addPositioningClass($(this)); }, 500 ) }); } function addPositioningClasses($card){ $card .addClass('position') }Esperaba que setTimeout resolviera esto, pero parece que no funciona. ¿Hay alguna manera de lograr la pausa antes de cada actualización de nombre de CLASE de cada objeto?
Agregué esto como un comentario, pero ahora que lo leí correctamente y respondí mi propia pregunta, probablemente funcione:
function positionCards() { var $cards = $('#gameboard .card'); var time = 500; $cards.each(function() { setTimeout( function(){ addPositioningClass($(this)); }, time) time += 500; }); }Perdón por desenterrar un hilo antiguo, pero este consejo podría ser útil para problemas similares:
$cards.each(function(index) { $(this).delay(500*index).addClass('position'); });Si crea un método que se llama a sí mismo cada 500 ms, eso debería funcionar. El siguiente código debería funcionar.
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) } }Probado en violín: http://jsfiddle.net/jomanlk/haGfU/