title: Animate number by incrementing and decrementing
body: <p>I want to do some <strong>number animation</strong> in some <code>div</code> value, the issue is that the animation start each time from <code>0</code> but I don't want this, I want that it to start from the previous value.</p>
  
  <p><strong>Example:</strong>
  If I enter <code>10</code>, animation starts from <code>0</code> and goes to <code>10</code>. If I then change the <code>10</code> to <code>8</code>, I want the animation to go from <code>10</code> to <code>8</code> and not from <code>0</code> to <code>8</code> again. Basically, it should increment or decrement from the previous value entered!</p>
  
  <p>Other think, if I enter some float e.g. <code>0.10</code>, it displays <code>1</code> and I want it to display the exact value.</p>
  
  <p>Thanks</p>
  
  <p><a href="http://jsfiddle.net/sz2fv0cp/5/" rel="nofollow noreferrer"><strong>JSfiddle Demo</strong></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/*numbers values*/
  $('.num').bind('change paste keyup', function() {
    var v1 = $(this).val();
    $('.price').html(v1);
    animatePrince();
  });
  
  
  /*numbers animation*/
  function animatePrince() {
    $('.price').each(function() {
      $(this).prop('Counter', $(this).val()).animate({
        Counter: jQuery(this).text()
      }, {
        duration: 1000,
        easing: 'swing',
        step: function(now) {
          jQuery(this).text(Math.ceil(now));
        }
      });
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.s1 {
    display: block;
  }
  
  .s2 {
    display: block;
    margin-bottom: 25px;
  }
  
  .num {
    display: block;
    margin-bottom: 30px;
    border: 1px solid #333;
    padding: 20px;
  }
  
  .price {
    border: 1px solid #222;
    padding: 10px 30px;
    padding: 20px 90px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;span class="s1"&gt;Input&lt;/span&gt;
  &lt;input class="num" type="float" value="1"&gt;
  &lt;span class="s2"&gt;Result&lt;/span&gt;
  &lt;span class="price"&gt;&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>