JQuery-3.0 Animation Methode mit Radius funktioniert nicht in Firefox

Question

Ich benutze neueste JQuery Version 3.0 Animate-Methode, um SVG Circle-Element zu animieren. Dies funktioniert in JQuery-2.2.4. Firefox hat nur dieses Konsolenproblem.

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) 

beraten Jeder mich zu diesem Thema.

Danke, Bharathi

Answer 1

Es gibt nichts in Ihrem Code, um die Animation Staaten sollten von Radius Null (oder einen anderen Wert) starten, es ist so r=50-r=50 Animieren, also keine Animation zu sehen ist. Die Tatsache, dass es bei früheren Versionen von jQuery funktioniert hat, beruhte wahrscheinlich auf fehlerhaftem Verhalten.

können Sie setzen den Radius auf Null, nachdem es auf eine Variable zu speichern:

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

Siehe Beispiel hier: https://jsfiddle.net/p9kbx0r5/