So I'm using gRaphael to create some charts. This is creating a cool bar chart line with some dots in it. Those dots have the ... nodes with x=10 y=20 as their attributes. Example
rect x="135.8" y="115.8" width="8.399999999999999" height="8.399999999999999" r="0" rx="0" ry="0" fill="#ff0000" stroke="none"
I want to use jquery to animate this guy if possible. The thing is if I do
$("rect").click(function({ $(this).animate({ 'x':30 }); });
In order to animate the x coordenate it doesn't work for obvious reasons I guess?? hehe. Also I've tried setting the attribute x to a variable and trying to animate that and nothing. Can any one help me with animation and svg with gRaphael?
This for instance works
$("rect").live('click',function(){ $(this).attr('x',100);});it moves the node but ofcourse doesn't animate it
Thanks!
I'm working on project which uses svgs. While I got the above to work, the animated value went from 0 to where-ever even if it has a value before the animation. So I used this instead (initial value for cy is 150):
$('#navlet .li1').mouseenter(function(){
$({cy:$('#nav_dot').attr('cy')})
.animate(
{cy: 60},
{duration:200,step:function(now){$('#nav_dot').attr('cy', now);}});
});