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="10">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() {
    $('#obs.compteur b').animate({
        nbsps: nbsps,
    }, {
        duration: 2500,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        },
    });
    
    $('#sps.compteur b').animate({
        nbobs: nbobs
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        },
    });
    
};

compteur_anim();