jQuery Plugin For Animating Numbers From X To Y - dynamicNumber
File Size: | 46 KB |
---|---|
Views Total: | 1859 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

dynamicNumber is a small yet configurable jQuery counter plugin which allows to animate a number from a value to another you specify.
How to use it:
1. Import the jQuery dynamicNumber plugin's script into the webpage. Make sure you first have jQuery library installed.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery-dynamicNumber.js"></script>
2. Create an element for the counter and specify the start/end values in the data
attributes as these:
<span class="dynamicNumber" data-from="0" data-to="100"> 0 </span>
3. Enable the dynamicNumber plugin.
$('.dynamicNumber').dynamicNumber();
4. Start the number animation.
$('.dynamicNumber').dynamicNumber('start');
5. All possible options to config the number animation. Note that the options can be passed via data
attributes as you seen in the step 2.
$('.dynamicNumber').dynamicNumber({ from: 0, to: 100, duration: 1000, decimals: 0, format: function format(n, options) { return n.toFixed(options.decimals); }, percentage: { decimals: 0 }, currency: { indicator: '$', size: 3, decimals: '2', separator: ',', decimalsPoint: '.' }, group: { size: 3, decimals: '2', separator: ',', decimalsPoint: '.' } });
6. API methods.
// start the animation $('.dynamicNumber').dynamicNumber('start'); // finish the animation $('.dynamicNumber').dynamicNumber('start'); // get the current number $('.dynamicNumber').dynamicNumber('get'); // enable the animation $('.dynamicNumber').dynamicNumber('enable'); // disable the animation $('.dynamicNumber').dynamicNumber('disable'); // goto 50 $('.dynamicNumber').dynamicNumber('go', 50); // stop the animation $('.dynamicNumber').dynamicNumber('stop'); // reset the animation $('.dynamicNumber').dynamicNumber('reset'); // destroy the animation $('.dynamicNumber').dynamicNumber('destroy');
7. Events.
$('.dynamicNumber')..on('dynamicNumber::ready', function (e) { // on ready }); $('.dynamicNumber')..on('dynamicNumber::init', function (e) { // on init }); $('.dynamicNumber')..on('dynamicNumber::update', function (e) { // on update }); $('.dynamicNumber')..on('dynamicNumber::start', function (e) { // on start }); $('.dynamicNumber')..on('dynamicNumber::stop', function (e) { // on stop }); $('.dynamicNumber')..on('dynamicNumber::reset', function (e) { // on reset }); $('.dynamicNumber')..on('dynamicNumber::finish', function (e) { // on finish }); $('.dynamicNumber')..on('dynamicNumber::enable', function (e) { // on enable }); $('.dynamicNumber')..on('dynamicNumber::disable', function (e) { // on disable }); $('.dynamicNumber')..on('dynamicNumber::destroy', function (e) { // on destroy });
This awesome jQuery plugin is developed by amazingSurge. For more Advanced Usages, please check the demo page or visit the official website.