jquery slow rising counter - suggestions

[unwashed potato!]

i'm looking for a counter that gets it's initial value from a field, and then slowly increases a value and fades to the new number, also slowly, and the increase in the counter is random between a set time of x and y

essentially what i'm after is having a "live" sales counter. when customer is on a page, there will be something like "sold on average over 600 products in the last 6 months", and then while viewing, the counter will in 5 seconds, fade to 601, thne after 10 seconds, fade to 602, then after 3 seconds, fade to 603.

make sense? any suggestions?

 

[Lmg80]

i'm looking for a counter that gets it's initial value from a field, and then slowly increases a value and fades to the new number, also slowly, and the increase in the counter is random between a set time of x and y

essentially what i'm after is having a "live" sales counter. when customer is on a page, there will be something like "sold on average over 600 products in the last 6 months", and then while viewing, the counter will in 5 seconds, fade to 601, thne after 10 seconds, fade to 602, then after 3 seconds, fade to 603.

make sense? any suggestions?

Yeah a jQuery course or stakeoverflow

 

[touch]

I'd do it by having 2 separate elements containing the numbers overlaid in the same position and fade one out whilst fading the other in. So when the page loads the first element shows 600 and is displayed in front. The second shows 601 but is hidden behind. After 10 seconds the jQuery fades the front one out whilst also fading the rear one in. Once the fade is complete update the rear element with the next number ready to fade them again.

 

[GravyMonster]

Here you go. I made the random interval pretty short just for this demo, but any values will work. Also note that as this is only done in the DOM it won't retain the new value when you go to another page. Unless you're using an SPA you'd probably need to store the counter in localStorage and re-apply the value in to #product-count when each page loads.

let $productCount = $('#product-count');
let updateText = () => {
  $productCount.animate({ opacity: 0 }, () => {
    $productCount.text((_, t) => (parseInt(t, 10)) + 1).animate({ opacity: 1 });
  });
  setTextUpdateDelay();
}

let getRandomTimeoutValueSeconds = (min, max) => (Math.floor(Math.random() * (max - min + 1)) + min) * 1000;
let setTextUpdateDelay = () => {
  setTimeout(updateText, getRandomTimeoutValueSeconds(1, 5));
}
setTextUpdateDelay();

https://jsfiddle.net/RoryMcCrossan/conf6xq4/