Как стать автором
Обновить

jquery-animateNumber – плагин для анимации чисел

Время на прочтение 1 мин
Количество просмотров 39K
jquery-animateNumber – плагин для jQuery, который анимирует числа также, как на stoloto.ru/rapido.

Что умеет «из коробки»


  • одновременная анимация числа с другими свойствами (как $.animate);
  • анимация числа от меньшего к большему и обратно;
  • анимация числа с автоматическим разделением разрядов (можно задать свой разделитель);
  • анимация числа со своей функцией шага анимации.


Пример


<p>Fun level <span id="fun-level" style="color: red; font-size: 0px;">0 %</span>.</p>

// функция $.animateNumber принимает такие же аргументы,
// как и $.animate, дополнительно можно использовать
// параметры 'number' и 'numberStep'
$('#fun-level').animateNumber(
  {
    number: 100,
    color: 'green', // требуется jquery.color
    'font-size': '50px',

    easing: 'easeInQuad', // требуется jquery.easing

    numberStep: function(now, tween) {
      var floored_number = Math.floor(now),
          target = $(tween.elem);

      target.text(floored_number + ' %');
    }
  },
  1800
);

Для работы требует jQuery 1.8.0 или новее.

Демо | Сайт плагина
Теги:
Хабы:
-2
Комментарии 10
Комментарии Комментарии 10

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн