jQuery knob animate - how to stop going all the way to maximum value

Question

I have the following code which works great - however I need the animation to stop at the value, not the max value. At present it goes all the way to max value and does not stop at the value of the knob. Any ideas?

jQuery(document).ready(function($) {
    $('.dial').val(0).trigger('change').delay(0);
var myColor = 'red';  
    $(".dial").knob({
    'min':0,
    'max':100,
    'readOnly': true,
    'width': 120,
    'height': 120,
    'fgColor': '#333',
    'dynamicDraw': true,
    'thickness': 0.2,
    'tickColorizeValues': true,
    'skin':'tron'
})
        var tmr = self.setInterval(function(){myDelay()},50);        
        var m = 0;       
        function myDelay(){
            m += 1;
            switch(m)
            {
            case 40:
                  myColor = 'yellow';
              break;
            case 70:
                  myColor = 'green';
              break;                    
            case 100:
              window.clearInterval(tmr);
              break;
            }            
            $('.dial').trigger('configure', {'fgColor':myColor}); 
            $('.dial').val(m).trigger('change');
        }               
});

Irvin Dominin · Accepted Answer · 2013-12-09T07:21:35.137

You can store the atrting value in a variabile in document.ready.

Then you can check the value in your interval function and if its value is bigger than starting value, stop update the control.

Code:

var maxVal = 0;
jQuery(document).ready(function ($) {
    maxVal = $('.dial').val();
    $('.dial').val(0).trigger('change').delay(0);
    var myColor = 'red';
    var knob = $(".dial").knob({
        'min': 0,
            'max': 100,
            'readOnly': true,
            'width': 120,
            'height': 120,
            'fgColor': '#333',
            'dynamicDraw': true,
            'thickness': 0.2,
            'tickColorizeValues': true,
            'skin': 'tron'
    });
    var tmr = self.setInterval(function () {
        myDelay();
    }, 50);
    var m = 0;

    function myDelay() {
        m += 1;
        if (m > maxVal) {
            window.clearInterval(tmr);
            return;
        }
        switch (m) {
            case 40:
                myColor = 'yellow';
                break;
            case 70:
                myColor = 'green';
                break;
            case 100:
                window.clearInterval(tmr);
                break;
        }
        $('.dial').trigger('configure', {
            'fgColor': myColor
        });
        $('.dial').val(m).trigger('change');
    }
});

Demo: http://jsfiddle.net/IrvinDominin/uHkN5/

Thanks for this, but not quite how I wanted it to function. Setting the max is not a problem, but setting the value is. If on your version, the max was at 80 but the value is at 60, I need it to stop animating at 60. Not sure if I explained myself correctly in the original post. Thanks for your help though. — Jeremy, Dec 08 '13 at 18:46
Yes, I had written my post wrong - edited now, sorry about that. — Jeremy, Dec 08 '13 at 18:47

jQuery knob animate - how to stop going all the way to maximum value

1 Answers1