Jquery3.0 Throws Error Setting A Property That Has Only A Getter Firefox

I have created SVG circle dynamically and animated it small circle to large using JQuery. Animation was working fine in other JQuery version and throws exception 'setting a propert

Solution 1:

Edit, Updated

Workaround for firefox where jQuery logs error at last else at Tween.propHooks._default.set line 6571

else {
      tween.elem[ tween.prop ] = tween.now; // logs error
}

You can create an object having property of value equal to r value, which is an SVGAnimatedLength object, and property having value where animation should stop; at step function of .animate() called on the created object as parameter to jQuery() set property using .attr("r", now), which appears to return same result at firefox, chromium

var fx = {
  _animateCircle: function(element, delayInterval) {
    var r = element.attr("r");
    var radius = {from:r, to:r * 2}; // set `r` to `radius.to` value
    $(radius).delay(delayInterval).animate({
      from: radius.to
    }, {
      duration: 700,
      step: function(now) {
        element.attr("r", now);
      }
    });
  }
}

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script><svgxmlns="http://www.w3.org/2000/svg"version="1.1"><circlecx="200"cy="100"r="50"stroke-width="1"fill="blue" /></svg>

jsfiddle https://jsfiddle.net/bxmgqnq3/3/

---

Substitute $.fn.attr() for .getAttribute()

var fx = {
  _animateCircle: function(element, delayInterval) {
    var radius = element.attr("r") * 2;
    console.log(radius);
    var scaleVal;
    element.delay(delayInterval).animate({
      r: radius
    }, {
      duration: 700,
      step: function(now) {
        scaleVal = now;
      }
    });
  }
}

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script><svgxmlns="http://www.w3.org/2000/svg"version="1.1"><circlecx="200"cy="100"r="50"stroke-width="1"fill="blue" /></svg>