jQuery / JS анимация подсчета чисел от нуля до значения

Question

Я создал веб-приложение, в котором код HTML получает целочисленное значение из python. Я хочу добавить подсчет от 0 к этой анимации числа. Я проверил много таких запросов в StackOverflow, например: ссылка .

Сегодня утром анимация работала нормально, но теперь не работает.

$('.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

Проверка вашего кода:

Поскольку нет логики c, определяющей, как должен изменяться счетчик, я добавил переменную countTo перед анимацией.

Поскольку вы ссылаетесь на { Counter: $(this).text() } как на объект свойств в функции анимации, $(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>