Animated jQuery Number Counter Plugin - Numinate
| File Size: | 8.76KB |
|---|---|
| Views Total: | 8520 |
| 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.










