Animated jQuery Number Counter Plugin - Numinate
File Size: | 8.76KB |
---|---|
Views Total: | 8377 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Numinate is a lightweight jQuery number counter plugin that allows to count up or down to a target number at a specified speed.
See also:
- Easy jQuery Number Animation Plugin - animateNumber
- Simple jQuery Plugin For Animating Numbers - Numerator
- Smooth Animated Numbers with Javascript and CSS3 - odometer
- Animating Numbers Counting Up with jQuery Counter-Up Plugin
Basic Usage:
1. Include the jQuery javascript library and jQuery numinate plugin on the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="numinate.1.0.1.js"></script>
2. Create a container you want to place the number counter on.
<span id="number-counter"></span>
3. Create some buttons to control the number counter by using jQuery numinate's methods.
<button onclick="$('#number-counter').numinate('start');">Start</button> <button onclick="$('#number-counter').numinate('stop');">Stop</button> <button onclick="$('#number-counter').numinate('restart');">Restart</button>
4. Initialize the counter with all the default settings.
<script type="text/javascript"> $(document).ready(function() { $('#number-counter').numinate({ // Counting starts from here. from: 0, // Counting ends here, if any differental setted. to: 0, // Interval for the whole running. // ! Overwrites the stepInterval if it's setted. runningInterval:null, // Interval between two step. // If not provided will calculate from runningInterval. stepInterval: null, // How many times refresh the %counter% value. stepCount:null, // How much a step's alters the current value. stepUnit: null, // The appering text, the %counter% token will be // replaced with the actual step's value. format: '%counter%', // Class will be added to the counter DOM(s). class: 'numinate', // The step values will be rounded to this precision, // this is directly passed to the currentValue.toFixed(precision) fn. precision: 0, // The counter starts on call, or do manualy. autoStart: true, // The counter remove itself when reaches the goal. autoRemove: false, // Event called when the counter has been created. onCreate: null, // Event called when the counter starts to count. onStart: null, // Event called before the counter update the step value. onStep: null, // Event called when the counter reached the goal, or stoped manualy. onStop: null, // Event called when the counter reached the goal value, or called manualy. onComplete: null, // Event called when the counter has been removed. onRemove: null, }); }); </script>
This awesome jQuery plugin is developed by greenball. For more Advanced Usages, please check the demo page or visit the official website.