Javascript 如何降低jquery计数器动画的速度

我有一个计数器，当达到一个特定的百分比时，它会产生动画。但是动画速度有点快，我想降低

下面是我的代码

HTML文件

<div class="progressbar" data-animate="false">
  <div class="circle" data-percent="90">
    <div></div>
  </div>
</div>

JS:

.progressbar {
    display: inline-block;
    width: 100px;
    margin: 25px;
}
.circle {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    margin-top: 10px;
    display: inline-block;
    position: relative;
    text-align: center;
}
.circle:after {
    width: 120px;
    height: 120px;
    content: "";
    border: 2px solid #fb4f14;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 30px;
    left: 30px;
}
.circle canvas {
    vertical-align: middle;
    border: 2px solid #fb4f14;
    border-radius: 50%;
}
.circle div {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -20px 0 0 -86px;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 31px;
}
.circle strong i {
    font-style: normal;
    font-size: 0.6em;
    font-weight: normal;
}
.circle span {
    display: block;
    color: white;
    margin-top: 12px;
}

$(document).ready(function ($) {
function animateElements() {
$('.progressbar').each(function () {
    var elementPos = $(this).offset().top;
    var topOfWindow = $(window).scrollTop();
    var percent = $(this).find('.circle').attr('data-percent');
    var percentage = parseInt(percent, 10) / parseInt(100, 10);
    var animate = $(this).data('animate');
    if (elementPos < topOfWindow + $(window).height() - 30 && !animate) {
        $(this).data('animate', true);
        $(this).find('.circle').circleProgress({
            startAngle: -Math.PI / 2,
            value: percent / 100,
            size: 180,
            thickness: 30,
            emptyFill: "rgba(0,0,0, .2)",
            fill: {
                color: '#fb4f14'
            }
        }).on('circle-animation-progress', function (event, progress, stepValue) {
            $(this).find('div').text((stepValue*100).toFixed(1) + "%");
        }).stop();
    }
});
}
animateElements();
$(window).scroll(animateElements);
});

---

您可以将duration param添加到circleProgress：

circleProgress({
  startAngle: -Math.PI / 2,
  value: percent / 100,
  size: 180,
  thickness: 30,
  emptyFill: "rgba(0,0,0, .2)",
  fill: {
    color: '#fb4f14'
  },
  animation: {
    duration: 3000
  }
})

---

我已经在小提琴上做了编辑。

只需为动画添加持续时间即可降低速度

animation:  {
    duration: 4000
    },

---

您需要在js代码中再添加一个属性（动画：{duration:3000}）

---

有关circle动画的更多信息，您可以访问

，如果您提到您正在使用“circle progress.js”插件并阅读其文档，则会更轻松。请参阅文档中的内容。感谢大家指向文档部分。这与RainMX93的答案相同。感谢您的努力。它起作用了。对你的答案投了赞成票。由于@Rainmx93首先回答正确，我接受了他的回答。祝你有一个愉快的一天：）谢谢@Nitesh:）这可能是值得指出的这2位的文档和它的工作。。非常感谢你。。投了赞成票并接受了答案。。祝你有愉快的一天：）这是和RainMX93相同的答案，谢谢你的努力。它起作用了。对你的答案投了赞成票。由于@Rainmx93首先回答正确，我接受了他的回答。祝你今天愉快：）

animation:  {
    duration: 4000
    },

$(this).find('.circle').circleProgress({
        startAngle: -Math.PI / 2,
        value: percent / 100,
        size: 180,
        thickness: 30,

        animation:{duration: 3000},

        emptyFill: "rgba(0,0,0, .2)",
        fill: {
            color: '#fb4f14'
        }