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

Question

I grab an array of jQuery objects and then through .each () it modifies every single jquery in the array.

In this case, I am updating the class names to call the -webkit-transition-property to use the css transition.

I want to have a pause before the start of each css transition. I use the following, but there is no delay between each update. Instead, they all seem to be updated immediately.

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 looks like it is not working. Is there a way to pause before each CLASS name update for each object?

Answer 1

I added this as a comment, but now that I have read it correctly and answered my question, this will 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 an old branch, but this tip might be useful for similar problems:

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

Answer 3

If you create a method that calls itself every 500 ms, that should do this 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 a fiddle: http://jsfiddle.net/jomanlk/haGfU/

Answer 4

How about . delay () ?

or

 function addPositioningClasses($card){ setTimeout(function() { $card.addClass('position')}, 1000); } 

Answer 5

If you are targeting Safari / iOS, depending on how important it is to control the exact time of the animation sequences, you should avoid any solution that includes JS timeouts. There is no guarantee that the animation will be completed simultaneously with a timeout delay, especially on slow processors or machines in which a lot of things are happening in the background. Later webkit versions (including mobile safari) allow you to execute temporary animation sequences via @-webkit-keyframes . Webkit.org has a nice introduction to it . It is actually quite easy to implement.

Answer 6

Try:

 function positionCards() { $('#gameboard .card').each(function() { $(this).delay(500).addClass('position'); }); } 

I'll be honest ... I had $ (this) .delay () wrong in the past in some cases and works flawlessly in others. However, this was usually due to jQuery animation calls, rather than handling DOM attributes.

Remember that .delay () does not work the same as setTimeout. See the jQuery.delay () documentation for more information.

As far as I know, everyone does $ () procedurally, so the next iteration of the call should only begin after the previous one has completed.

Answer 7

Check it out, it worked fine for me! :)

 jQuery('.optiresultsul li').each(function(index) { jQuery(this).delay(500*index).animate({ opacity: 1 }, 500,function(){ jQuery(this).addClass('bgchecked'); }); }); 

Answer 8

This code will add a set delay of up to 50 ms. Then, for each cycle through the ".row" class, it will add an additional delay of 200 ms. This will create a nice delay effect for each line.

 $( document ).ready(function() { // set inital delay var dtotal = 50; $(".row").each(function() { //add delay to function $(this).delay(dtotal).show(); //add 200ms to delay for each loop dtotal = dtotal + 200; }); });