CODEWITHSUNDEEP
jquerysvgjquery-animate
Macbernie
Macbernie

Reputation: 1323

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

Upvotes: 0

Views: 150

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

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

Upvotes: 2

Related Questions