如何不使用.animate()减慢jQuery环形进度条动画速度

你需要减慢环形进度条的动画速度，当前默认动画时长为400ms，而你的代码使用的是circleProgress插件而非.animate()方法，只需在插件配置中添加duration参数即可调整：

修改后的代码 #

$(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: 15,
            emptyFill: "#ededed",
            fill: {
              color: "green"
            },
            // 设置动画时长，单位：毫秒
            duration: 1000
          })
          .on(
            "circle-animation-progress",
            function (event, progress, stepValue) {
              $(this)
                .find("div")
                .text((stepValue * 100).toFixed(0) + "%");
            }
          )
          .stop();
      }
    });
  }

  animateElements();
  $(window).scroll(animateElements);
  $(document).unbind("scroll");
});

说明 #

circleProgress插件原生支持通过duration参数控制动画时长，默认值为400毫秒。你可以将duration设置为更大的数值（比如示例中的1000代表1秒），就能减慢动画的播放速度。

内容的提问来源于stack exchange，提问作者Blake Bringer