The Basics

This jQuery plugin provides a basic +1/-1 animation to a number styled similar to how scores were updated in old video games.


Basically just include the file.

<script src="//"></script>
<script src="/libs/jquery-levelup/jquery.levelup.min.js"></script>

<span>counter <span style="font-weight: bold;" id='the_cnt'>0</span></span>

    var $tc = $('#the_cnt');
    $tc.levelup({'start' : 0});

    $('#incrementBtn').on('click', function(event) {
        $tc.levelup('increment', 1);
    $('#decrementBtn').on('click', function(event) {
        $tc.levelup('decrement', 1);


Name Type Default Description
start integer 0 Start value for span.
incrementer|decrementer.bold boolean true Whether the incrementer|decrementer is bold
incrementer|decrementer.color CSS color string null Change the incrementer|decrementer's text color
incrementer|decrementer.class string null Add a class to the incrementer|decrementer element
showThousands boolean false Whether to use a thousands separate everywhere.
thousandSep strings , The thousand separator to use.

Methods Param
'increment' integer by which to increment
'decrement' absolute value of integer by which to decrement (always positive)


I will put a few demos here.

Basic Demo

It was originally written as just a small JavaScript animation and this version is effectively what I started with before adding features.

- -

$('#basic_1').levelup('increment', 1);

Increment by bigger value

The increment and decrement methods allow for other values.

- -

$('#basic_2').levelup('increment', 10);
$('#basic_2').levelup('decrement', 7);

Non-bold option

The incrementer and decrementer are bold by default, but you can turn that off

- -

$('#basic_3').levelup({'start' : 0, 'incrementer' : {'bold' : false}});
$('#basic_3').levelup('increment', 10);
$('#basic_3').levelup('decrement', 7);

Controlling the color

You can specify the text color. This can be done via a class as well, but this is for those who simply wish to control one aspect of it.


$('#basic_4').levelup({'start' : 0, 'incrementer' : {'color' : 'red'}});
$('#basic_4').levelup('increment', 10);

Controlling the class

You can style the incrementer/decrementer however you like via a class.


    .fun_times {
      background-color: lightblue;
      color: #FFA500;
      box-shadow: 0 0 10px 10px #fff;
$('#basic_5').levelup({'start' : 0, 'incrementer' : {'class' : 'fun_times'}});
$('#basic_5').levelup('increment', 10);

Controlling the thousands separator

You can set the thousands separator as anything you want. It is off by default.


$('#basic_6').levelup({'start' : 1111, 'showThousands' : true});
$('#basic_6').levelup('increment', 5555);

Accumulator is not span - still must be inline display type

If you don't use a span, which is inlined, you'll need to manually inline the type. This is a temporary fix that relates to where it lines up the animation.

$('#basic_7').levelup({'start' : 1111, 'showThousands' : true});
$('#basic_7').levelup('increment', 5555);

Value Accessor

You'll want to use this to get the value instead of reading the text, because the text could be out of date.

- - :



Apache License 2.0