如何将jQuery函数应用于内联CSS
我一直在用我找到的比特和波波制作一个动态的统计数据循环计数器。这个圆的中心有一个数字状态，当它运行时，我已经成功地从零开始计数了。
<div class="single-circle">
<h6 class="counter stat">50</h6>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165 165" class="circle-svg">
<g id="circles" data-name="circles">
<circle class="back-circle" cx="82.5" cy="82.5" r="75" />
<circle class="front-circle" cx="82.5" cy="82.5" r="75" style="stroke-dashoffset: -235px;" />
</g>
</svg>
</div>下面是jQuery：
$('.counter').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 2000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});我现在想通过内联样式选择器"strokedash-offset“将相同的函数应用于".front- circle”，以便让圆在数字计数器旁边具有动画效果，但我正在努力实现这一点。
完整的JS小提琴和SCSS在这里：https://jsfiddle.net/ch8phcbd/
为了清楚起见，我想针对并操纵内联样式选择器的值来实现这一点，并避免在jQuery中放置可变的值，因为在最终版本中，这个值将被动态地拉到视图页面中。
任何帮助都是非常感谢的。
谢谢!
回答 2
Stack Overflow用户
发布于 2017-09-20 20:36:43
我所做的是删除css过渡，这样它们就不会影响动画，并在每一步减少您的红色圆圈的笔划。
$('.counter').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 2000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
var increase = Math.ceil(this.Counter);
$(".front-circle").css("stroke-dashoffset", "-=2.5");
}
});
});JsFiddle：https://jsfiddle.net/ch8phcbd/4/
更新：
为了对计数器有更多的控制，我们首先需要找出笔划偏移需要多少像素才能使圆100%变红。在你的例子中，数字是472，这意味着1%的圆圈是4.72px。然后我们需要让它增加笔划偏移量，每个数字只增加一次。因为该函数被调用超过50次，并且只是对数字进行舍入，所以我添加了一条if语句来检查中间的数字自上一步以来是否发生了变化，如果是，则将1%的偏移量添加到偏移量中：
if(Math.ceil(this.Counter) > $this.text())
{
$(".front-circle").css("stroke-dashoffset", "-=" + singlePercent);
}如果您更改<h6 class="counter stat">50</h6>中的数字，您可以看到它适用于任何百分比。
JsFiddle：https://jsfiddle.net/ch8phcbd/10/
Stack Overflow用户
发布于 2017-09-20 21:07:13
https://jsfiddle.net/vvkqmqLm/4/
计算偏移，然后应用它：
var r = $circle.attr('r');
var c = Math.PI*(r*2);
(val < 0) { val = 0;}
(val > 100) { val = 100;}
pct = ((100-val)/100)*c;还编辑了css，以便按顺时针方向加载动画
.circle-svg {
transform: rotate(90deg) scaleX(-1);
}如果稍微重写一下，就不需要水平翻转了(scaleX(-1))，但是你明白了。
https://stackoverflow.com/questions/46321164
复制相似问题
腾讯云开发者
