Question

Example here: http://jsfiddle.net/dhREK/32/

With Raphael JS I’m creating a series of triangles using a for loop. After creating the triangles I want to be able to animate any one of them by selecting the raphael objects by index, something like:

tri[1]

or

tri.1

but I’m not sure of the right syntax. In any case, using

tri.animate({fill: '#ff0000'}, 400)

only animates the last triangle.

How can I specifically select the other nodes?

Thanks!

var paper = new Raphael(0, 0, 500, 500);

for(var i = 0; i < 6; i++) {
    var coords = 'M 43 0 L 74 63 L 13 63 Z';

    if(i % 2) {
        coords = 'M 43 63 L 74 0 L 13 0 Z';                      
    }

    var tri = paper.path(coords).attr({
       'fill' : '#000',
        'stroke-width' : '0'
    });

    tri.transform('T'+i * 34+',0');
}


tri.animate({fill: '#ff0000'}, 400)

PS: I was able to get all of the children of my paper as jquery objects (as seen in the jsfiddle link), but using animate() on a jquery object does not allow me to animate the raphael properties… any comment on that would be much appreciated as well!

Answer 1

Turn tri into an array.

var paper = new Raphael(0, 0, 500, 500),
    tri = [];

for(var i = 0; i < 6; i++) {
    var coords = 'M 43 0 L 74 63 L 13 63 Z';

    if(i % 2) {
        coords = 'M 43 63 L 74 0 L 13 0 Z';                      
    }

    tri[i] = paper.path(coords).attr({
       'fill' : '#000',
        'stroke-width' : '0'
    });

    tri[i].transform('T'+i * 34+',0');
}


tri[1].animate({fill: '#ff0000'}, 400);