aishek/jquery-animatenumber

jQuery animate number

jquery-animateNumber

Demo | v0.0.14 – Latest Release

README на русском языке

jQuery numbers animation plugin, adds 'number' property and step function to jQuery's animate function properties.

Requires jQuery 1.7.0 or higher (latest tested with 3.3.1).

Quick example

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

// animateNumber accepts same arguments, as animate does
// it adds only 'number' and 'numberStep' params
$('#fun-level').animateNumber(
  {
    number: 100,
    color: 'green', // require jquery.color
    'font-size': '50px',

    // optional custom step function
    // using here to keep '%' sign after number
    numberStep: function(now, tween) {
      var floored_number = Math.floor(now),
          target = $(tween.elem);

      target.text(floored_number + ' %');
    }
  },
  {
    easing: 'swing',
    duration: 1800
  }
);

All examples

Alternative plugins for same task

• jQuery Numerator

Development

1. npm install grunt-cli -g
2. npm install
3. https://github.com/gmarty/grunt-closure-compiler
4. grunt watch

Note on Patches / Pull Requests

• Fork the project.
• Make your feature addition or bug fix.
• Send me a pull request. Bonus points for topic branches.

License

It is free software, and may be redistributed under the terms specified in the LICENSE file.

Contributors

• Alexandr Borisov
• Greg Thornton
• Tomáš Opekar

jquery-animatenumber's Issues

Ressetting to 0 - looping animations

Hello, I have a series of numbers that animate after each other.

When I get to the last number, i'd like to animate the first number again, but when I call the function again the number stays at it's max value.

How can I reset the animation?
Thanks in advance.

bower not working

Bower install not working:
bower jquery-animateNumber#0.0.10 ENOTFOUND Package jquery-animateNumber not found

Bower package was registered with different name:
jquery-animatenumber
http://bower.io/search/?q=animatenumber

Prepending ($) dollar-sign

I can't figure out how to extend the plugin in order to prepend a dollar sign. Is this possible? Thank you!

Uncaught TypeError: $(...).animateNumber is not a function

I get Uncaught TypeError: $(...).animateNumber is not a function on your demo page. It used to work just fine. The implementation I've used stopped working with the same error as well.

Updating on the go to create a "live" counter

I'm trying to make it so that I could update the number given to animateNumber every X seconds (the data would be coming from an ajax request) without restarting the counter from 0. Is this possible ?

it not work on IE8!

it not work on IE8!

Add example for "1 000 000,00", please

Hello!
Add example for "1 000 000,00", please, ore how mix example 2 with example 6.

Thank You!

Decimals?

Doesn't look like it would count up decimals. Seems to only round the numbers. How could you allow it to add up with decimals, so it can run on a currency.

Use duration options and also a callback function

Hello, I'm not able to use duration options and a callback function at the same time:

element.find(".num").animateNumber({
            number: parseInt(element.text(), 10)
        },
        {
            duration: dur
        },
        function () {
            lastElement = element;
            setTimeout(function () {

                if (current_mobile_num < $(".real").length - 1) {
                    current_mobile_num++;
                } else {
                    current_mobile_num = 0;
                }
                anim_num_mobile(current_mobile_num, 2000, 0);
            }, 2000);
        }
    );

How can I achieve this?
Thanks in advance.

Google Chrome browser crashes on text highlighting

Hi. Thanks for your nice plugin. It has a problem in Google Chrome. When it is counting numbers up/down, if you select (highlight) text via mouse, the page crashes completely.

Custom animation start point with decimal doesn't works ?

Hi !

Thanks for that awesome plugin !

Is there a problem when we mix "custom animation start point" and "decimal places" ?

That seems to doesn't work and always start to 0.

Exemple :

`var decimal_places = 2;
var decimal_factor = decimal_places === 0 ? 1 : Math.pow(10, decimal_places);

    selector
    .prop('number', 22.55)
    .animateNumber(
      {
        number: 40.32* decimal_factor,
        numberStep: function(now, tween) {
            var floored_number = Math.floor(now) / decimal_factor,
                target = $(tween.elem);
                
                
                if (decimal_places > 0) {
                  
                // force decimal places even if they are 0
                  floored_number = floored_number.toFixed(decimal_places);

                  // replace '.' separator with ','
                  floored_number = floored_number.toString().replace('.', ',');
                }
            
                target.text(floored_number);
            
          }
      },
      500
    );`

Have you any idea ?

Thanks a lot.
Robin

привет

Как сделать, чтоб анимация сработала при скролле, например цифры у меня в футере, и когда юзер скроллить до футера, чтоб заработал анимация, а то юзер не видит анимацию. мне нужно чтоб увидел и привлек внимание.
спасибо

using jquery-animate-numbers with input ?

i just using jquery-animate-numbers , i don't how to use with input , any idea ?

Need to run only once

This was working before I added decimal support, but once I added decimal support, the function keeps refiring.

http://viverae.steadfastlight.com/case_study/real-estate/

* not an issue, but a recommendation *

hello there. i was looking for something like this and I find it pretty cool.
but,
do you think is possible to add an animation like a number counter?
more or less like this:
https://codemyui.com/click-and-drag-counter/

broken in latest version of Jquery 3.x

Yes, i see its only compatible with a select versions of older JQuery , any chance you can update it to work with the most recent ones 3.x. Mainly because I try to use it on page(s) that just point to the latest CDN versions of Jquery and I would like to really use your script with them. Thanks

Need help animation for time format (hh:mm:ss)

Thanks so much for this plugins, i appreciatd.
I need help to make time format, like hh:mm:ss
For example :
00:00:00 animate to 00:09:50

Anyone can help?
Thanks

Need help with decimal

Hello!
How to make animation up to 7.89?
animateNumber({number: 7.89}, 300) - not work

Wrapping digits in span / div

Is this possible?

jQuery not loaded on your website

Hi, aishek, tried to test what your plugin does. It doesn't work, you've forgot to load jQuery

https://aishek.github.io/jquery-animateNumber/

thanks.

animateNumber on toggle

Hello,

Was wondering if I could create a scenario where using your plugin and a checkbox.

based on smth (really crude / basic)

    $(selector).change(function(){
        if (this.checked) {
            animateNumber to 11111
        } else {
            animateNumber to 111
        }
    });

Basically to count up upon checking and count down upon unchecking.

Передать значение number из html

Хороший скрипт, но очень неудобно задавать значения в скрипте. Хотелось бы иметь возможность передать значение для параметра "number" из самого элемента.
Пробовал так:

var number_value = $(this).data('numval');
$('.numberanimate').animateNumber({
number: number_value
}, 500);

<span id="valuebriks" class="numberanimate" data-numval="700">0</span>

но не получаеться. Видимо, скрипт не понимает, что this — это об этом элементе. Или я что-то делаю не так?

Callback when animation ends

Hi,

thank you for the great plugin.

Is there an option for callback when counter reach its end value (or when the animation stops)? Thank you again.

Add support to animate "value" inside of <input> tag

The current version of the code uses $el.text() to set the value during animation, but that doesn't work with tags.

I made changes like the below to get it to work:

if (d(a.elem).prop("tagName") === "INPUT") { d(a.elem).prop("value",e); } else { d(a.elem).text(e); }

numberStepFactories.separator returns NaN for negative numbers with three digits

The default numberStepFactories.separator (i.e. with three-digit groupings) shows NaN for negative numbers having exactly three digits (or rather multiples of three digits).

Example:

$('#world-population').animateNumber( {
      number: -222,
      numberStep: $.animateNumber.numberStepFactories.separator(',')
      });

This will show "NaN,222" , presumably because the negative sign is left in a digit group by itself.

Demo Example 6: decimal places - Wrong decimal_factor value

var decimal_factor = decimal_places === 0 ? 1 : decimal_places * 10;

should be

var decimal_factor = decimal_places === 0 ? 1 : Math.pow(10, decimal_places);

release new tag to support bower

Great package, thanks!

Currently when installed via bower the package is being fetch without bower.json file. Please release a new tag with bower.json included.

Check the tree at 0.0.10 state - it has no bower.json https://github.com/aishek/jquery-animateNumber/tree/v0.0.10

Thanks!

Unable to use HTML for number separator

Unable to use html for number separator eg:

var comma_separator_number_step = $.animateNumber.numberStepFactories.separator(' ');
$this.animateNumber({number: 100,numberStep: comma_separator_number_step},2000 });

Library use jquery .text() to concatenate separator, is there possibility to add another settings to choose between .text() or .html() ?

easings don't seem to work when defined as an option

I've tried now multiple approaches to get easings to work. Been trying different jquery versions, etc. - the only way for me to make it work is to define the easing as an extra parameter. When an easing is defined as an option, it seems to be ignored.

So this approach ( as defined in the readme ) doesn't seem to work :

$(el).animateNumber(
    {
        number: 123,
        easing: 'easeInOutBack' // <-- doesn't seem to work
    },
    5000,
    function() {
        // some callback
    }
);

But this one does :

$(el).animateNumber(
    {
        number: 123
    },
    5000,
    'easeInOutBack',  // <-- works
    function() {
        // some callback
    }
);