Плавное увеличение/уменьшение числа на JQuery

Question

Использую следующий код:

let n = $('#test').text();

$({numberValue: n}).animate({numberValue: 5000}, {
   duration: 500,
   easing: "linear",
   step: function(val) {
      $('#test').text(Math.round(val));
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="test">500</div>

Подскажите, пожалуйста, как можно реализовать плавное увеличение/уменьшение числа, используя animate, но с автоматическим разделением разрядов при анимации, с возможностью задать свой разделитель.

То есть, чтобы выглядело так:

1000 => 1 000; 1001 => 1 001; и т.д.

Пытался передавать в animate сразу числа с разделением, но не работает:(

Нашёл плагин для анимации чисел - jquery.animateNumber, но хочется без плагинов.

Уточнение: в блоке с id="test" будут числа уже с разделением, т.е. 1 000 и т.д. Отсчёт должен начинаться каждый раз с числа, которое находится в блоке, а не с 0.

Answer 1

Форматирование toLocaleString можно настроить с помощью опций

let n = $('#test').text().replace(/\s/g, '');

$({numberValue: n}).animate({numberValue: 5000}, {
   duration: 2000,
   easing: "linear",
   step: function(val) {
      $('#test').text(Math.round(val).toLocaleString());
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="test">2 000</div>

Answer 2

let n = $('#test').text().replace(/\D/g,'');

function separateNumber(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "); 
  //разделитель можно задать тут вторым аргументом для метода replace. Сейчас, как видно, пробел
}

$({numberValue: n}).animate({numberValue: 1200}, {
   duration: 500000,
   easing: "linear",
   step: function(val) {
      $('#test').text(separateNumber(Math.round(val)));
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="test">1 000</div>

БЛОГ НА HUSL

Плавное увеличение/уменьшение числа на JQuery

Ответы (2 шт):