Chaining jQuery animations using recursion crashes browser?

Using setInterval, you should be able to do something like the following. There's no recursion taking place at all. (Of course, this example is contrived, but should explain the concept.) Working example: jsfiddle.net/TNwAZ/1 HTML div id='myDiv' style="position:relative">div​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ Javascript var count = 10; var duration = 500; var interval = setInterval(function() { $('#myDiv').

Text(count). Animate({left: '+=50'},duration); count--; // Decrement count if(!count) { clearTimeout(interval) } }, duration );​ EDIT: Not sure how you are getting the elements to animate, but here's an example of placing references to them in an array, and looping over that http://jsfiddle.net/TNwAZ/3 HTML div id='myDiv1' style="position:relative">div 1 div 2 div 3div 1 div 2 div 3​ Javascript var $divs = $('divid^=myDiv'); intervalAnimate($divs); function intervalAnimate(collection) { var count = 10; var duration = 500; var interval = setInterval(function() { $(collection). Text(count).

Animate({left: '+=50'},duration); count--; // Decrement count if(!count) { clearTimeout(interval) } }, duration ); }.

Using setInterval, you should be able to do something like the following. There's no recursion taking place at all. (Of course, this example is contrived, but should explain the concept.) Working example: jsfiddle.net/TNwAZ/1/ HTML div​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ Javascript var count = 10; var duration = 500; var interval = setInterval(function() { $('#myDiv').

Text(count). Animate({left: '+=50'},duration); count--; // Decrement count if(!count) { clearTimeout(interval) } }, duration );​ EDIT: Not sure how you are getting the elements to animate, but here's an example of placing references to them in an array, and looping over that. http://jsfiddle.net/TNwAZ/3/ HTML div 1 div 2 div 3 Javascript var divArray = 'myDiv1','myDiv2','myDiv3'; for(var I in divArray) { intervalAnimate(divArrayi); } function intervalAnimate(theDiv) { var count = 10; var duration = 500; var interval = setInterval(function() { $('#' + theDiv).

Text(count). Animate({left: '+=50'},duration); count--; // Decrement count if(!count) { clearTimeout(interval) } }, duration ); } EDIT: This version skips the for loop, and just gets a collection of jQuery objects, and passes that in. http://jsfiddle.net/TNwAZ/5/ HTML div 1 div 2 div 3​ Javascript var $divs = $('divid^=myDiv'); intervalAnimate($divs); function intervalAnimate(collection) { var count = 10; var duration = 500; var interval = setInterval(function() { $(collection).

Text(count). Animate({left: '+=50'},duration); count--; // Decrement count if(!count) { clearTimeout(interval) } }, duration ); }.

I like this idea, but I can't seem to get this to work on multiple divs. That is, if you wrap this in a function and call it in a for loop for myDiv1, myDiv2, myDiv3, etc. To animate them all at once. – Rob Sobers May 4 '10 at 13:12 I'll update my answer with a couple of solutions. – user113716 May 4 '10 at 13:36 Thanks!

I modified my code to use setInterval (and it works! ), but I'm having a timing problem. I have to crank up the duration of the interval way higher than the sum of each animation otherwise it starts stepping on itself.

Would you mind taking a look at the code I edited in to my question? – Rob Sobers May 4 '10 at 21:01 I assume you're updating right now, because I don't see any code. Anyway, are you saying that you want ( number of elements animated x duration of animation = duration of interval )?

– user113716 May 4 '10 at 21:20 The code you posted appears to be the recursive version. – user113716 May 4 '10 at 21:34.

Setup an end of animation function. If you want to execute 'N' animations create an array and add 'N' elements to it. Each time you execute the end of animation function slice() off one of the array elements.

When it's empty then you're done, otherwise start the next animation.

I haven't tested this code, but have you tried something like: var x = "one", "two", "three"; function animate(e, init){ e. Data("index", (init? 0 : e.

Data("index") + 1)); e. Html(xe. Data("index")); e.

Animate({ key: val }, { duration: 500, complete: function(){ if ($(this). Data("index") ToAnimate"). Each(function(){ animate($(this), true); }); Granted, there is recursion, but maybe none of the kind you're hoping to eliminate?

It might end up being something that's limited by the browser, unfortunately.(Although, I can't think of why having a longer . Queue("fx")would itself affect performance. ) Also there could be different x values for each .

ToAnimate if you set it up (x) using an indexed object.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.