Question

I’m building an application that uses Raphael to draw circles on a map based on values read from a json feed. Each circle node gets an ID, which I then use to call it and change its attributes. Selecting a new variable changes the size and color of the circles. I can change the size using JQuery’s attr method, but not animate.

I’ve assigned an ID to each circle:

circle.raphael.node.id = [thisCircle]

I can change the size and color of each circle using the attribute method, thusly:

$(thisCircle).attr({
r : [new radius]
fill : [new color]
});

But I can’t animate it using JQuery’s animate method:

$(thisCircle).animate({
r : [new radius],
fill : [new color]
}, 200);

What am I missing?

Answer 1

Why aren’t you animating the raphael object through it’s own animate method? :

circle.animate({
    r : newRadius,
    fill : newColor
},200);

Here’s a demo that shows how to animate a raphael circle object :

http://jsfiddle.net/gion_13/MpjGJ/

.
In that same demo you’ll see that I’ve added an unnecessary mini jquery plugin that lets you animate the raphael svg object through the native jquery animation method just like this :

$('#the-id-of-the-svg-node').animate({
    r : newRadius,
    fill : newColor
},200);