0

I am using latest JQuery version 3.0 animate method to animate SVG Circle element. This is working fine in JQuery-2.2.4. Firefox only have this console issue.

JQuery-3.0 animation

  var fx = {
        _animateCircle: function (element, delayInterval) {
            var radius = element.attr("r");
            var box = $(element)[0].getBoundingClientRect(),
                 centerX = box.left + (box.width / 2),
        centerY = box.top + (box.height / 2);
            var scaleVal;
            element.delay(delayInterval).each(function () {  }).animate({
                r: radius
            }, {
                duration: 700,
                step: function (now) {
                    scaleVal = now;
                    $(element)[0].setAttribute("r", scaleVal);
                }
            });
        }
    }

    fx._animateCircle($("circle"), 500)

Any one advise me on this.

Thanks, Bharathi

Bharathi
  • 1,288
  • 2
  • 14
  • 40

1 Answers1

0

There is nothing in your code that states the animation should start from radius zero (or any other value), so it's animating from r=50 to r=50, thus no animation is visible. The fact that it worked on previous versions of jQuery probably relied on buggy behaviour.

You can set the radius to zero after saving it to a variable:

var radius = element.attr("r");
element.attr("r", 0);

See example here: https://jsfiddle.net/p9kbx0r5/

methodofaction
  • 70,885
  • 21
  • 151
  • 164
  • I got a solution from the blow post. Your solution still not resolve the issue in Firefox. Run your fiddle link in Firefox.. http://stackoverflow.com/questions/38430148/jquery3-0-throws-error-setting-a-property-that-has-only-a-getter-firefox – Bharathi Jul 19 '16 at 08:51
  • Please do not ask the same question multiple times, it wastes people's time and it is against the site rules. – methodofaction Jul 19 '16 at 13:55