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

от автора

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 или новее.

Демо | Сайт плагина

ссылка на оригинал статьи http://habrahabr.ru/post/208274/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *