Animated Counter

Using of jQuery Animate custom Step function to animate values

HTML

<table>
  <tbody>
    <tr>
      <td>Nb Observations</td>
      <td>Nb Espèces</td>
    </tr>
    <tr>
      <td class="compteur" id="obs"><b nbobs="0">0</b></td>
      <td class="compteur" id="sps"><b nbsps="0">0</b></td>
    </tr>
  </tbody>
</table>

CSS

@import "https://fonts.googleapis.com/css?family=Abel&amp;text=0123456789";
body {
    font: normal 30px Abel;
    text-transform: uppercase;
    color: #666;
}

table {
    width: 100%;
    text-align: right;
}

#sps {
    color: #0A8;
}

#obs {
    color: #f60;
}

JavaScript

nbsps = 2552;
nbobs = 35694;

function compteur_anim() {
    $('.compteur b').animate({
        nbsps: nbsps,
        nbobs: nbobs
    }, {
        duration: 1000,
        easing: 'swing',
        step: function(now) {
            $(this).text(Math.ceil(now));
        },
        complete: compteur_anim
    });
};

compteur_anim();