我动态创建了 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 版中不起作用。请就此提出建议。
谢谢, 巴拉蒂。
最佳答案
编辑、更新
firefox 的解决方法,其中 jQuery 最后记录错误 else
在Tween.propHooks._default.set
线 6571
else {
tween.elem[ tween.prop ] = tween.now; // logs error
}
您可以创建一个属性值等于 r
的对象值,这是一个 SVGAnimatedLength
对象和具有动画应该停止的值的属性;在step
.animate()
的功能调用创建的对象作为 jQuery()
的参数使用 .attr("r", now)
设置属性,它似乎在 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/
替换 $.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>
关于javascript - JQuery3.0 抛出错误设置一个只有 getter firefox 的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38430148/