Raphael animation sequence with array of existing elements

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