how to call raphael methods on jquery objects?

Question

I\'m creating some circles using Raphael. When a user clicks a button, I want to animate these circles (by growing their radius). How do I do this?

For example, here

Answer 1

Reading through the Raphaël Reference, it seems that you can do this using Raphaël's own Event methods

circle.click(function (event) {
    this.animate({ r: 100 }, 500);
});

The same part of the documentation also notes that you can use libraries like jQuery, but you have to pass in the node, like this:

$(circle.node)

Where circle is the object returned from the paper.circle call.

In your case, however, I think the following code will work:

var paper = new Raphael("canvas_container", 300, 150), 
    circles = [];

circles.push(paper.circle(50, 75, 30));
circles.push(paper.circle(150, 75, 30));

$("button").click(function() {
    $.each(circles, function(i, c){
         c.animate({ r: 100 }, 500);
    });
});