aishek / jquery-animatenumber Goto Github PK
View Code? Open in Web Editor NEWjQuery animate number
Home Page: http://aishek.github.io/jquery-animateNumber
License: MIT License
jQuery animate number
Home Page: http://aishek.github.io/jquery-animateNumber
License: MIT License
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
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.
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.
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.
I can't figure out how to extend the plugin in order to prepend a dollar sign. Is this possible? Thank you!
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'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.
This was working before I added decimal support, but once I added decimal support, the function keeps refiring.
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.
Hello!
Add example for "1 000 000,00", please, ore how mix example 2 with example 6.
Thank You!
Hello!
How to make animation up to 7.89?
animateNumber({number: 7.89}, 300) - not work
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 just using jquery-animate-numbers , i don't how to use with input , any idea ?
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
Хороший скрипт, но очень неудобно задавать значения в скрипте. Хотелось бы иметь возможность передать значение для параметра "number" из самого элемента.
Пробовал так:
var number_value = $(this).data('numval');
$('.numberanimate').animateNumber({
number: number_value
}, 500);
<span id="valuebriks" class="numberanimate" data-numval="700">0</span>
но не получаеться. Видимо, скрипт не понимает, что this — это об этом элементе. Или я что-то делаю не так?
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,
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.
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 ?
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.
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.
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()
?
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
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); }
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
}
);
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
Is this possible?
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.
it not work on IE8!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.