Question

我正在使用最新的JQuery 3.0版animate方法来动画SVG Circle元素。这在JQuery-2.2.4中运行良好。 Firefox只有这个控制台问题。

  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)

任何人都会就此提出建议。

谢谢， Bharathi

Answer 1

您的代码中没有任何内容表明动画应该从半径零（或任何其他值）开始，因此它从r=50动画到r=50，因此没有动画可见。它在以前版本的jQuery上运行的事实可能依赖于错误的行为。

将半径保存为变量后，可以将半径设置为零：

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

请参阅此处的示例：https://jsfiddle.net/p9kbx0r5/

带有radius的JQuery-3.0 animate方法在firefox中不起作用

1 个答案: