What I want to do is animate a couple of objects in order of the id's in the change list.
But it seems all _anim runs at the same time.
How can I run them in order?
$("#Sim2").click(function () {
var change = [9,4];
change.forEach(function (i) {
_anim(i);
});
});
var _anim = function (id) {
$("#number"+id).animate({
left: '50%',
}, 500);
};
use setTimeout
change.forEach(function (i) {
setTimeout(function () {
_anim(i);
}, 500 * i);
});
The function _anim below is guaranteed to run all animations is order. It executes the next animation from the completion callback of the last. It also includes an optional callback function which is executed when all animations have finished.
Here is the code in action. http://jsfiddle.net/Hrkee/
$("#Sim2").click(function () {
var change = [9,4];
_anim(change, 0, { left: '50%' }, 500, function() { alert('all complete'); });
});
function _anim(aryKeys, index, properties, duration, callback) {
$("#number" + aryKeys[index]).animate(properties, duration, function(){
if(index + 1 <= aryKeys.length - 1){
_anim(aryKeys, index + 1, properties, duration, callback);
} else {
if(callback)
callback();
}
});
}
FYI, I stole the code from a blog post I wrote about loading async javascript synchronously. http://www.mobtowers.com/load-cross-domain-javascript-synchronously-using-jquery/
You can use a recursive function ..
Fiddle HERE
function processElements(aRRay, k) {
if (aRRay[k]) {
$('#number' + aRRay[k]).animate({
left: '50%'
}, 500, function () {
processElements(aRRay, k + 1)
});
}
}
$("#Sim2").click(function (e) {
var change = [1, 2, 3];
processElements(change, 0);
});
