Search code examples
javascriptcountnonlinear-functions

count quickly from one number to another in a non linear way

I have a number (float) lets say 4.37. at some point this number is changed to another value that can be basically anthing, but still float and with 2 commas. What i need is a nice transition from the first number to the second one. In particular i am searching for way to display this like this:

from number A it starts growing quickly, and as soon as it gets near the second one it slows down. It should go from number A to B in about 0.8 seconds.

This number is displayed in a DIV.

Solution

  • You can use jQuery.Animation for this, and use any easing or animate just about any property

    var o = {value : $('#inp1').val};
$.Animation( o, {
    value: $('#inp2').val()
  }, { 
    duration: 800,
    easing : 'easeOutCubic'
  }).progress(function(e) {
      $('#result').text((e.tweens[0].now).toFixed(2));
});

    FIDDLE