how to call raphael methods on jquery objects?

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's my example code:

<!DOCTYPE html>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">

$(function() {  
var paper = new Raphael("canvas_container", 300, 150);, 75, 30);, 75, 30);

$("button").click(function() {
    $("circle").each(function(i) {      
        this.animate({ r: 100 }, 500); // Doesn't work.


<div id="canvas_container"></div>  
<button>Click me to animate the circles</button>


[In general, I'm not clear what is the difference between the following two variables:

var c =, 75, 30); // Raphael circle
$("circle").first(); // using jQuery to grab that Raphael circle

Is the jQuery object a wrapper around the Raphael circle?]



Reading through the Raphaël Reference, it seems that you can do this using Raphaël's own Event methods (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:


Where circle is the object returned from the call.

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

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

circles.push(, 75, 30));
circles.push(, 75, 30));

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

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

circle1 =, 75, 30); 
circle2 =, 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.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.