Macbernie Macbernie - 5 months ago 12
jQuery Question

Animate svg cx item, setting the starting point of the animation

I have a SVG circle and I use jquery animate to displace it.

$(circle).animate(
{'foo':30},
{
step: function(foo) {
$(this).attr('cx', foo);
},
duration: 2000
}
);


It work perfectly but the default starting point of my "circle" is 0. I want it to begin at 10, but I don't know how to do that.

I need a transition from 10 to 30, and not 0 to 30.

I've tried

$(circle).attr('cx', '10');


before, but the animation still begins at 0

Answer

Because foo isn't a real CSS property, jQuery has nothing to look up as a starting value. So it is clearly defaulting to 0.

Have you tried the following?

    $(circle).animate(
        {'foo':20},
        {
            step: function(foo) {
                $(this).attr('cx', 10+foo);
            },
            duration: 2000
        }
    );