Как анимировать цифры?

Question

[Сергей]

Добрый день, в блоке есть цена, при выборе разных чекбоксов она пересчитывается и вставляется в html

$($this).parents('.right_product').find('.new_price').html( price + ' руб.' );

Как можно анимировать цифры price, меняется как в большую сторону так и в меньшую и не мешает ли этому приставка "руб." или вынести её в статичный html? Заранее спасибо!

Answer 1

[Сергей Соколов]

Поможет jQuery.animate() – этим методом можно, в т.ч., абстрактное значение изменять от A до B. Примерно так:

$({ myProp: A }) // начальное значение A
  .animate(
    { myProp: B }, // целевое конечное значение B
    { // всякие опции анимации: время, функция на каждый шаг и т.п.
      step: function(now, tween) {  } // эта будет вызываться на каждом шаге анимации
    }
  );

Для вашей задачи пример (Fiddle):

const $price = $("#banner-message > p > span");

$("button").on("click", function(){
  const oldPrice = parseInt($price.text());
  const newPrice = Math.round(500 + Math.random() * 4500);
  $({price:oldPrice}).animate({price:newPrice}, {
    step: (now, tween) => $price.text(Math.round(tween.elem.price))
  });
});

Comments

[Сергей]

круто!) спасибо, а подскажете что за параметры now и tween просто у меня цены кратны 10, а после этой функции получается вместо 4000 => 4002 т.е. появляется небольшой "хвостик"
как можно сделать чтобы считало ровно те цифры которые я получаю? https://jsfiddle.net/r7gbzx3q/

[Сергей Соколов]

1Sergey1, для чистоты финиша добавьте помимо step ещё done: () => $price.text(newPrice)
Эта функция выполнится по окончании анимации и установит четкое конечное значение.
Что за параметр now - не нашёл в документации, но его значения как раз промежуточные значения цены. А параметр Tween – весь объект, который оборачиваем в jQuery - со свойством price.

Answer 2

[Andrey Perov]

https://github.hubspot.com/odometer/docs/welcome/