Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Animate changing numbers (with text, not images)

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 LICENSE
Octocat-spinner-32 README.md
Octocat-spinner-32 jquery.tally.js
Octocat-spinner-32 jquery.tally.min.js
README.md

jQuery Tally

Demo

What is it?

A jQuery plugin that animates (and formats) numbers, drawing attention and making your page feel alive. See?

Why is it cool?

Tally uses jQuery's cssHooks and fx.step features to behave just like every other animation! That means there's less code, and you get custom duration, easing, callback, and queue control for free.

Here's the simplest usage:

$('.points').tally(75);

But check this out:

$('.points').animate({tally: '+=250', fontSize: '48px', top: '-10px'},
                     {duration: 5000, easing: 'swing', queue: false});

Oh yeah, what else?

Tally plays well with the Number Formatter plugin, which offers greater formatting control and includes locale-specific defaults. Just include it alongside Tally and it will be used.

Why did you make it?

At BigDoor, we award points. Lots of 'em. But we wanted point balances to feel more "active" and "tactile" — like coins spilling out of a slot machine. So we created this animation (along with a few other spiffy effects).

By the way, we're hiring.

Does it suck?

No.

Documentation

.tally(number [, duration] [, easing] [, complete])

.tally(number, options)

Calling tally(x, ...) on a jQuery object is equivalent to calling animate({tally: x}, ...). That means the second argument can be a duration (followed by easing, callback, etc.) or an object with options.

$.tally.defaults

Default options for number formatting. These are passed to $.tally.parseNumber and $.tally.formatNumber.

  • decimalMark: Which decimal mark character to use. Default: '.'
  • thousandsSeparator: Which character separates groups of digits. Default: ','

$.tally.parseNumber(string[, options])

Parse a number string formatted with the given options (or use the defaults). If the Number Formatter plugin is installed, this is a reference to $.parseNumber.

$.tally.formatNumber(number[, options])

Format a number with the given options (or use the defaults). If the Number Formatter plugin is installed, this is a reference to $.formatNumber.

Something went wrong with that request. Please try again.