By DA.


2011-03-05 07:32:03 8 Comments

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?

8 comments

@Rob 2011-03-05 07:44:40

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

@JohnP 2011-03-05 07:55:46

How is your code any different than the OP? There is a scope error because addPositioningClasses doesn't exist in the context of setTimeout

@Rob 2011-03-05 07:58:16

@JohnP - @DA states that the code works but that all the elements are positioned at once, I wasn't aware that the scope of the function was part of the problem...

@JohnP 2011-03-05 08:00:54

I just tried it in a fiddle and it doesn't work. I may be mistaken, but I can't see how that code can work at all.

@Rob 2011-03-05 08:06:21

@JohnP - @DA said --> "I'm using the following, but there is no delay in between each update. Instead, they all appear to be updating at once."

@JohnP 2011-03-05 08:08:05

@DA can you please clarify whether the current setTimeout() works or not? @Rob, I've removed my -1 just in case :)

@DA. 2011-03-05 18:53:12

This was the solution! The difference is that I was setting everything to have a timeout of 500. Because they execute at the same time, there wasn't a delay between them. By incrementing the timeout by 500 for each item, you then get the visual delay. thanks, Rob!

@Pranesh Janarthanan 2018-08-22 14:04:56

Solution: which is also present in this Git: gist.github.com/Zackio/7648481

@johnjohn 2012-08-03 13:44:54

Sorry to digging up an old thread (and for my bad english), but this tip could be usefull for other similar cases:

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

@Yan Foto 2015-01-20 13:29:28

Beware that delay is meant only for the animation queue and wont work on e.g. css() (see here)

@aksu 2015-06-02 17:36:15

You have to use .queue() (and .dequeue()) when delaying .addClass(): $(this).delay(500*index).queue(function() { $(this).children('.flipcontainer').addClass('visible').deque‌​ue(); });

@adamj 2017-04-28 03:19:32

@aksu You should copy what you have there and make it into an answer, because it's lost amongst the comments and your answer helped me make it work properly.

@LeeF 2015-10-19 03:49:25

This code will add set the inital delay to 50ms. Then for each loop through the ".row" class it will add an additional 200ms delay. This will create a nice delayed show effect for each row.

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

@woot 2015-10-19 03:56:25

It's best if you add some commentary and not just toss code out there.

@Deian Motov 2015-01-23 09:25:55

Check this out, worked well for me! :)

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

@lsuarez 2011-03-05 08:54:32

Give this a try:

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

I'll be honest... I've had $(this).delay() misbehave in the past in certain instances and work flawlessly in others. However, this was normally in conjunction with jQuery animation calls, not DOM attribute manipulation.

Please be aware .delay() does not function in the same way as setTimeout. For more information, see the jQuery .delay() documentation.

As far as I am aware, $().each does execute procedurally so the next iteration of the call should only begin after the preceding has completed.

@DA. 2011-03-05 18:55:59

I may be wrong, but in reading the jquery documentation, it look slike delay is only for delaying jQuery animations. I think you are also correct in that last paragraph. The thing was that I wasn't delaying the function call that set the class, but rather I was delaying when the class would be set. So, it applied the delay to all 30 elements at the same time, and they all then delayed the same amount of time.

@Andrew 2011-03-05 08:05:07

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. It's actually pretty easy to implement.

@DA. 2011-03-05 18:57:00

I am, indeed, only targetting iOS (it's an app). I'm not timing the animation sequence, but, rather, timing how long to wait until to update the class name, which then, in turn, triggers a webkit transition css.

@JohnP 2011-03-05 07:53:19

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/

@DA. 2011-03-05 18:53:57

I need to investigate .push() some more. I wasn't aware of that!

@diEcho 2011-03-05 07:51:55

How about .delay() ?

or

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

@Sandwich 2011-03-05 07:53:20

I always wonder that too, but to this day I haven't found a context where this method can be applied.

@DA. 2011-03-05 07:54:30

From what I can tell, delay() only applies to jQuery animations.

Related Questions

Sponsored Content

32 Answered Questions

60 Answered Questions

[SOLVED] How to check whether a checkbox is checked in jQuery?

22 Answered Questions

[SOLVED] How can I refresh a page with jQuery?

53 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

11 Answered Questions

33 Answered Questions

32 Answered Questions

[SOLVED] Add table row in jQuery

10 Answered Questions

[SOLVED] How to change the href for a hyperlink using jQuery

1 Answered Questions

[SOLVED] Add static pause in jQuery iteration of $.each

  • 2017-01-11 23:48:59
  • Michael Davis
  • 63 View
  • -3 Score
  • 1 Answer
  • Tags:   javascript jquery

1 Answered Questions

[SOLVED] jquery each delay without effect

Sponsored Content