jQuery/JS 数字计数动画从零到值

Question

我已经构建了一个 Web 应用程序，其中 HTML 代码从 python 接收整数值。我想添加从 0 到该数字动画的计数。 我在 StackOverflow 上检查了很多这样的查询，例如 link。

今天早上动画效果很好，但现在不行了。

$('.count').each(function () 
{
    $(this).prop('Counter',0).animate
    ({
        Counter: $(this).text()
    }, 
    {
        duration: 10000,
        easing: 'swing',
        step: function (now) 
        {
            $(this).text(Math.ceil(now));
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 class="font-weight-bold" style="color:#f92424"><span class="count">{{ confirmedIn }}</span></h4>

也许我错过了一些图书馆之类的东西，idk

谁能帮我解决这个问题？

Answer 1

审查您的代码：

由于没有逻辑来规定计数器应该如何变化，我在动画之前添加了一个countTo 变量。

由于您将 { Counter: $(this).text() } 引用为 animate 函数中的属性对象，因此 $(this).text() 以 {{ confirmed }} 开头，这不是可解析的数字，因此是 NaN。

下面的解决方案应该可以解决这个问题。

$('.count').each(function () {
    let el = $(this);
    let countTo = 1000;
    
    el.prop('counter',0).animate({
        counter: `+=${countTo}`
    }, {
        step: function (now) {
            $(this).text(Math.ceil(now))
        },

    });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 class="font-weight-bold" style="color:#f92424"><span class="count">{{ confirmedIn }}</span></h4>