Search code examples
jquerygraphael

I am finding Raphael object using class name and animating, but not work at all

I got 2 no.of Circle, clicking big circle i am finding small circle using the class name and trying to animate the small circle, but not working at all.

But fadeId, fadeOut properites are working.

My function:

var paper = new Raphael('myPaper',500,500);
var circle = paper.circle(100,100,100).attr({'fill':'red'});
circle.node.setAttribute('class','red');
var text = paper.text(100,100,"test Text").attr({'fill':'#fff'});

var smallCircle = paper.circle(300,100,50).attr({'fill':'green'}).data('id','green');
smallCircle.node.setAttribute('class','green'); 

var newSet = paper.set();

newSet.push(circle,text);

newSet.attr({cursor:'pointer'}).data('id','oval');

$('.red').on('click',function () {   
    $('.green').animate({'cx':200},5000); //animation not working.
} )

​

jsfiddle here

Solution

  • If you want to animate using Raphael you need to get the Raphael object for the element, rather than a jQuery object. To do that you need to get the raphaelid property from the element, and then use the getById method of your canvas.

    paper.getById($('.green')[0].raphaelid).animate({'cx': 200}, 5000);

    If you have more than one element you can probably just loop through and animate each one.

    var anim = Raphael.animation({'cx': 200}, 5000);
$('.green').each(function() {
    paper.getById(this.raphaelid).animate(anim);
}