aishek / jquery-animatenumber Goto Github PK

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

Thank You!

Is this possible?

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.

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.

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 ?

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.

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

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

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

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

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

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.

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

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!

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
    }
);

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() ?

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.

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

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.

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

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/

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

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

should be

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

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 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

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/

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.

it not work on IE8!

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

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

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.

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); }