jquery-animateNumber – плагин для jQuery, который анимирует числа также, как на stoloto.ru/rapido.
Что умеет «из коробки»
- одновременная анимация числа с другими свойствами (как $.animate);
- анимация числа от меньшего к большему и обратно;
- анимация числа с автоматическим разделением разрядов (можно задать свой разделитель);
- анимация числа со своей функцией шага анимации.
Пример
[ads1]
<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 или новее.