title: JS chart knob: animate from value to value rather than 0
body: <p>I have this animated donut that changes value on <code>li</code> hover. However, currently it resets to 0 and then animates to the new value. Ideally it should animated from value to value.</p>
  
  <p>Here's a JSFiddle: <a href="http://jsfiddle.net/jme11/xx2Ky/" rel="nofollow">http://jsfiddle.net/jme11/xx2Ky/</a></p>
  
  <p>My JS:</p>
  
  <pre><code>var dial = $('.dial');
  dial.knob({
      readOnly: true
  });
  $('.pets &gt; li').on('mouseenter', function () {
      var button = $(this);
      var myVal = button.data('value');
      button.css('backgroundColor', 'yellowgreen').siblings().css('backgroundColor', '#ccc');
      dial.stop().animate({
          value: myVal
      }, {
          duration: 200,
          easing: 'swing',
          step: function () {
              dial.val(Math.ceil(this.value)).trigger('change');
          },
          complete: function () {
              dial.val(myVal + '%');
          }
      });
  });
  </code></pre>