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);
    });
});

Answer 2

Your selector "circle" isn't targeting anything - there's no circle element for you to target. However, you could do this:

circle1 = paper.circle(50, 75, 30); 
circle2 = paper.circle(150, 75, 30); 

$("button").click(function() { 
    circle1.animate({ r: 100 }, 500);
    circle2.animate({ r: 100 }, 500);
}); 

I couldn't tell you if you can animate() the circles based on the radius, but at the very least this gives you a jQuery object to work with.