javascript - jQuery and Knob animate issue -

i trying animate number rolls number when page loads. using library display dial (http://anthonyterrien.com/knob/). issue having number seems different every time run it. should consistent number ending on 19420. lower , there doesn't seem particular pattern.

my js code looks this:

$(function() {     $('#dial').knob({         min: '0',         max: '25000',         readonly: true     });      $({         value: 0     }).animate({         value: 19420      }, {         duration: 950,         easing: 'swing',         step: function() {             $('#dial').val(math.round(this.value)).trigger('change');         }     }); }); 

the fiddle can found here: http://jsfiddle.net/nd5sf/

what have done wrong or there i've missed out? if not, these 2 libraries not compatible?

the issue because using step function instead of progress.

step:

a function called each animated property of each animated element. function provides opportunity modify tween object change value of property before set.

progress:

a function called after each step of animation, once per animated element regardless of number of animated properties. (version added: 1.8)

code:

$(function () {     $('#dial').knob({         min: '0',         max: '25000',         readonly: true     });      $({         value: 0     }).animate({         value: 19420     }, {         duration: 950,         easing: 'swing',         progress: function () {             $('#dial').val(math.round(this.value)).trigger('change');         }     }); }); 

docs: http://api.jquery.com/animate/

demo: http://jsfiddle.net/irvindominin/jw2gp/