jquery animation of specific attributes

Question

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!

Solution 1

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.

Solution 2

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);}});
});

Solution 3

In fact, there is a way to animate a specific attribute:

$("rect").each(function(){
   $(this).css("MyX",$(this).attr("x"))
   .animate({MyX:500},{step:function(v1){$(this).attr("x",v1)}})
})

Solution 4

I found a way to use the jQuery call without running into the problem that the attribute gets reset to 0 when the animation starts like some other answers here

Lets say we want to animate the width and height attribute of an img tag element with id image. To animate it from its current value to 300 we could do this:

var animationDiv= $("<div></div>"); //we don't add this div to the DOM
var image= $("img#image");
//could use any property besides "top" and "left", but the value must be valid, that means concatenating a "px" to numerical attributes if they don't have it already (and removing them in the step callback if they do)
animationDiv.css("left", image.attr("width")); 
animationDiv.css("top", image.attr("height")); 
animationDiv.animate(
    {
        left: 300,
        top: 300
    },
    {
        duration: 2500,
        step: function(value, properties) {
            if (properties.prop == "left")
                 image.attr("width", value + "px")
            else
                 image.attr("height", value + "px")
        }
    }
)

In this approach we use a div that is not inside the DOM and animate values in it, we then use the div CSS values to animate our element. Not very pretty but gets the job done, if you need to stop the animation you can call .stop() on animationDiv.

jsfiddle

View more solutions

Comments

[climboid]

gotcha. I'll try to see if I can extend the gRaphael plugin as needed then. Thanks a lot for your help!

[Langdon]

This seems to always start from zero, despite what .attr('x') is initially. I don't see an init (or similar) option to send in... is there anything to say that x should start from 50 and animate to 100?

[A F]

@Langdon, rslm has provided a solution below

[ARF]

@Langdon check my answer