Animating Numbers jQuery dynamicNumber - Download jQuery Plugin For Animating Numbers From X To Y - dynamicNumber

Download jQuery Plugin For Animating Numbers From X To Y – dynamicNumber

By Posted on

This time I will share jQuery Plugin and tutorial about jQuery Plugin For Animating Numbers From X To Y – dynamicNumber, hope it will help you in programming stack.

Animating Numbers jQuery dynamicNumber - Download jQuery Plugin For Animating Numbers From X To Y - dynamicNumber

File Size: 46 KB
Views Total: 1479
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
1 <script src="//code.jquery.com/jquery.min.js"></script>
2 <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:

view source
1 <span class="dynamicNumber"
2       data-from="0"
3       data-to="100">
4       0
5 </span>

3. Enable the dynamicNumber plugin.

view source
1 $('.dynamicNumber').dynamicNumber();

4. Start the number animation.

view source
1 $('.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.

view source
01 $('.dynamicNumber').dynamicNumber({
02   from: 0,
03   to: 100,
04   duration: 1000,
05   decimals: 0,
06   format: function format(n, options) {
07     return n.toFixed(options.decimals);
08   },
09   percentage: {
10     decimals: 0
11   },
12   currency: {
13     indicator: '$',
14     size: 3,
15     decimals: '2',
16     separator: ',',
17     decimalsPoint: '.'
18   },
19   group: {
20     size: 3,
21     decimals: '2',
22     separator: ',',
23     decimalsPoint: '.'
24   }
25 });

6. API methods.

view source
01 // start the animation
02 $('.dynamicNumber').dynamicNumber('start');
03  
04 // finish the animation
05 $('.dynamicNumber').dynamicNumber('start');
06  
07 // get the current number
08 $('.dynamicNumber').dynamicNumber('get');
09  
10 // enable the animation
11 $('.dynamicNumber').dynamicNumber('enable');
12  
13 // disable the animation
14 $('.dynamicNumber').dynamicNumber('disable');
15  
16 // goto 50
17 $('.dynamicNumber').dynamicNumber('go', 50);
18  
19 // stop the animation
20 $('.dynamicNumber').dynamicNumber('stop');
21  
22 // reset the animation
23 $('.dynamicNumber').dynamicNumber('reset');
24  
25 // destroy the animation
26 $('.dynamicNumber').dynamicNumber('destroy');

7. Events.

view source
01 $('.dynamicNumber')..on('dynamicNumber::ready', function (e) {
02   // on ready
03 });
04  
05 $('.dynamicNumber')..on('dynamicNumber::init', function (e) {
06   // on init
07 });
08  
09 $('.dynamicNumber')..on('dynamicNumber::up<a href="https://www.jqueryscript.net/time-clock/">date</a>', function (e) {
10   // on update
11 });
12  
13 $('.dynamicNumber')..on('dynamicNumber::start', function (e) {
14   // on start
15 });
16  
17 $('.dynamicNumber')..on('dynamicNumber::stop', function (e) {
18   // on stop
19 });
20  
21 $('.dynamicNumber')..on('dynamicNumber::reset', function (e) {
22   // on reset
23 });
24  
25 $('.dynamicNumber')..on('dynamicNumber::finish', function (e) {
26   // on finish
27 });
28  
29 $('.dynamicNumber')..on('dynamicNumber::enable', function (e) {
30   // on enable
31 });
32  
33 $('.dynamicNumber')..on('dynamicNumber::disable', function (e) {
34   // on disable
35 });
36  
37 $('.dynamicNumber')..on('dynamicNumber::destroy', function (e) {
38   // on destroy
39 });

This awesome jQuery plugin is developed by amazingSurge. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: