Raphael animation sequence with array of existing elements - animation

Question

I am, trying to create a simple animation sequence using Raphael.js. Specifically I have a set of raphael elements (circles) in an array and need them to fade in one by one.
I found a jQuery plugin "jQuery.eachStep()" but I can't figure out how to get it to work. The Rapheal is working, but the "eachStep" is not.
var rsr = Raphael('rsr', '600', '300');
var fillColor = {fill: '#00A651','stroke-width': '0','stroke-opacity': '0'}
var circle_b = rsr.circle(513, 128, 4).attr(fillColor);
var circle_c = rsr.circle(477, 128, 4).attr(fillColor);
var circle_d = rsr.circle(441, 128, 4).attr(fillColor);
var circle_e = rsr.circle(406, 128, 4).attr(fillColor);
var circle_f = rsr.circle(370, 128, 4).attr(fillColor);
var circle_g = rsr.circle(334, 128, 4).attr(fillColor);
var circle_h = rsr.circle(298, 128, 4).attr(fillColor);
var circle_i = rsr.circle(262, 128, 4).attr(fillColor);
var circle_j = rsr.circle(226, 128, 4).attr(fillColor);
var circle_k = rsr.circle(191, 128, 4).attr(fillColor);
var circle_l = rsr.circle(155, 128, 4).attr(fillColor);
var collection = [
circle_b, circle_c, circle_d, circle_e, circle_f, circle_g, circle_H, circle_i, circle_j, circle_k, circle_l
];
$.eachStep(collection, '600', function(i, val, duration){
val.animate({'opacity': '0'}, duration, 'linear');
});
Or if I could get a proper for loop working that would be sufficient.
http://jsfiddle.net/s5vAL/3/

Answer 1

I think you probably don't want an each function unless you increment a delay or something in it. The animate method has a callback which will call a function on completion of the animation (the 4th parameter). So you can make it recursive like this...
var rsr = Raphael('rsr', '600', '300');
var fillColor = {fill: '#00A651','stroke-width': '0','opacity': '1'}
var circle_b = rsr.circle(513, 128, 4).attr(fillColor);
var circle_c = rsr.circle(477, 128, 4).attr(fillColor);
var circle_d = rsr.circle(441, 128, 4).attr(fillColor);
var circle_e = rsr.circle(406, 128, 4).attr(fillColor);
var circle_f = rsr.circle(370, 128, 4).attr(fillColor);
var circle_g = rsr.circle(334, 128, 4).attr(fillColor);
var circle_h = rsr.circle(298, 128, 4).attr(fillColor);
var circle_i = rsr.circle(262, 128, 4).attr(fillColor);
var circle_j = rsr.circle(226, 128, 4).attr(fillColor);
var circle_k = rsr.circle(191, 128, 4).attr(fillColor);
var circle_l = rsr.circle(155, 128, 4).attr(fillColor);
var collection = [
circle_b, circle_c, circle_d, circle_e, circle_f, circle_g, circle_h, circle_i, circle_j, circle_k, circle_l
];
function nextAnim( count ) {
if( count >= collection.length ) { return }
collection[ count ].animate( {'opacity': '0'}, 1000, 'linear', nextAnim.bind(null,count+1 ) );
};
nextAnim(0);
jsfiddle here