Setting the value dynamically does not animate the knob

[abishekrsrikaanth]

How to animate the knob when setting the value of it dynamically.

Example: http://jsbin.com/juzor/1/

[CalebKester]

I'd like to know this as well. I think it would be great to animate the knob based on changing the value.

[maeishoj]

Im queueing for this. I'd like to know how to get an animation when updating the value, like if we did a mouse scroll. It's god awful changing values without animation...

[q2apro]

You can find the answer at http://www.jqueryajaxphp.com/dynamically-animate-jquery-knob/

$("#change").click(function() {
    var newval = parseInt($('#newval').val());
    var preval = parseInt($('#preval').val());
    $({value: preval}).animate({value: newval}, {
        duration: 1000,
        easing:'swing',
        step: function()
        {
            $('.knob').val(this.value).trigger('change');
            $('#preval').val(newval);
            $('#newval').val('');
        }
    });
});

[zdrd]

So here's a more practical base approach using the above idea... This will animate it to the endValue

var endValue = 50;
$('.dial').animate({ value: endValue }, {
        duration: 1000,
        easing: 'swing',
        step: function() {
            $('.dial').val(this.value).trigger('change');
        }
    });

[joydevpal]

Preloader and wow.js are activated in my site. When preloader completes loading and i am scrolling to knob area, knob already completed the drawing and only entire knob is animated not the drawing. I want to show the knob drawing when i scroll to the knob area. Please help me. Thank you.

[spiskommg]

@zdrd great solution, thanks! the dynamic pull of the dials .val property is the perfect way to do this.