Search code examples
javascriptodometer

Continuous Count Up on Odometer JS

I am using odometer.js to animate a php value from an xml file and it is working great, however after the value gets to where it needs to be, I want it to count up by the cents, to look like the number is growing.

window.odometerOptions = {
  format: '(,ddd).dd'
};

// var finalDigit = '<?php echo $value10 ?>';
var finalDigit = 1508.19;
setTimeout(function(){
  $('.odometer').html(finalDigit);
}, 1000);
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://github.hubspot.com/odometer/themes/odometer-theme-default.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>

$<div class="odometer">0000.00</div>

Example of what I am trying to achieve: https://maryland.livecasinohotel.com/

enter image description here

Solution

  • Set another timer or interval and just feed it an updated value. It seems to animate from the previously set value to the new:

    window.odometerOptions = {
  format: '(,ddd).dd'
};

// var finalDigit = '<?php echo $value10 ?>';
var finalDigit = 1508.19;
setTimeout(function(){
  $('.odometer').html(finalDigit);
}, 500);
setInterval(function(){
  finalDigit += 0.01;
  $('.odometer').html(finalDigit);
}, 2000);
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://github.hubspot.com/odometer/themes/odometer-theme-default.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>

$<div class="odometer">0,000.00</div>