Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery animation of specific attributes

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!

like image 860
climboid Avatar asked Jul 12 '11 20:07

climboid


People also ask

What is custom animation in jQuery?

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").

Which of the following properties can not be animated using jQuery?

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.

Is jQuery slower for animations?

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.


2 Answers

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);}});
});
like image 125
rslm Avatar answered Nov 29 '22 00:11

rslm


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.

like image 37
jsgoupil Avatar answered Nov 29 '22 01:11

jsgoupil