3

SVG サークルを動的に作成し、JQuery を使用して小さな円から大きな円にアニメーション化しました。アニメーションは他の JQuery バージョンでは正常に機能していましたが、JQuery バージョン 3.0 でのみ「getter のみを持つプロパティを設定する」という例外がスローされます。ネットで検索しました。属性にセッター関数がないために発生します。

_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 でのみ機能しない理由です。これについて私にアドバイスしてください。

ありがとう、バラティ。

4

1 に答える 1

2

編集、更新

jQueryが最後elseのTween.propHooks._default.set行でエラーをログに記録するFirefoxの回避策6571

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

オブジェクトである値と等しいr値のSVGAnimatedLengthプロパティを持つオブジェクトと、アニメーションが停止する場所の値を持つプロパティを作成できます。を使用してプロパティを設定するパラメーターとして、作成されたオブジェクトで呼び出されるstep関数で、firefox、chromiumで同じ結果を返すように見えます.animate()jQuery().attr("r", now)

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/

代用$.fn.attr()_.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>

于 2016-07-18T07:03:40.243 に答える