JQuery3.0抛出错误设置一个只有一个getter firefox的属性 [英] JQuery3.0 throws error setting a property that has only a getter firefox

问题描述

我已经动态创建了SVG圈，并使用JQuery将小圈子动画为大圈。动画在其他JQuery版本中运行良好，并且仅在JQuery 3.0版中抛出异常设置仅具有getter的属性。我在网上搜索过。它会导致由于属性没有setter功能。

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 property that has only a getter" in JQuery version 3.0 only. I have searched in online. It will caused due to the attribute don't have setter function.

_animateCircle: function (element, delayInterval) {
            var radius = element.getAttribute("r");
            var scaleVal;
            var $ele = $(element);
            var layer = this;
            $ele.delay(delayInterval).each(function () { }).animate(
                {   
                    r: radius // if i comment this line, exception not occur. But animation not working
                },
                {
                    duration: 700,

                    step: function (now) {
                        scaleVal = now;
                    }
                }
            );
        }

我的问题是为什么这不仅仅适用于JQuery 3.0版。请告诉我。

My question is why this not working only in JQuery version 3.0 only. Please advise me on this.

谢谢，
Bharathi。

Thanks, Bharathi.

推荐答案

编辑，更新

firefox的解决方法，其中jQuery最后记录错误 else at Tween.propHooks._default.set line 6571

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
}

您可以创建一个属性值等于<的对象code> r value，这是 SVGAnimatedLength 对象，以及具有动画应停止的值的属性;在步骤函数 .animate（）在创建的对象上调用 jQuery的参数（ ）使用 .attr（r，现在）设置属性，这似乎在firefox返回相同的结果，铬

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)

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

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

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

替代 $ .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)

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

这篇关于JQuery3.0抛出错误设置一个只有一个getter firefox的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！