jQuery and Knob animate issue

Question

I am trying to animate a number so that it rolls into the number when the page loads. I am using another library to display a dial ( http://anthonyterrien.com/knob/ ). The issue I am having is that the number seems to be different every time I run it. It should be a consistent number ending on 19420. However sometimes it is lower and there doesn't seem to be any particular pattern.

My JS code looks like 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 be found here: http://jsfiddle.net/ND5Sf/

What have I done wrong or is there anything I've missed out? If not, are these 2 libraries not compatible?

Answer 1

The issue is because you are using step function instead of progress .

Step:

A function to be called for each animated property of each animated element. This function provides an opportunity to modify the Tween object to change the value of the property before it is set.

Progress:

A function to be called after each step of the animation, only once per animated element regardless of the 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/