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!
Definition and Usage. The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").
The animate() method is typically used to animate numeric CSS properties, for example, width , height , margin , padding , opacity , top , left , etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality.
jQuery can be several times slower than CSS when talking about animations. CSS animations and transitions have the advantage of being hardware accelerated by the GPU, which is really good in moving pixels.
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);}});
});
You can definitely animate a property by doing so
$("rect")
.animate(
{ x: 100 },
{
duration: 1000,
step: function(now) { $(this).attr("x", now); }
});
You do not need to save that property in CSS.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With