Tropicalista Tropicalista - 3 months ago 36
jQuery Question

Jquery Knob animate and change color

I'd like to create a knob that switch color at some point. For example, at 35 is red, at 70 is yellow and 100 is green.

I also would like to make it animate.

this is my fiddle: http://jsfiddle.net/Tropicalista/jUELj/6/

My code is:

enter code here

$(document).ready(function() {
$('.dial').val(13).trigger('change').delay(2000);
$(".dial").knob({
'min':0,
'max':100,
'readOnly': true,
'width': 120,
'height': 120,
'fgColor': '#b9e672',
'dynamicDraw': true,
'thickness': 0.2,
'tickColorizeValues': true,
'skin':'tron'
})

});

Answer

You can acomplish that with setInterval/clearInterval functions:

$(document).ready(function (){
$('.dial').val(0).trigger('change').delay(2000);
$(".dial").knob({
    'min':0,
    'max':100,
    'readOnly': true,
    'width': 120,
    'height': 120,
    'fgColor': '#b9e672',
    'dynamicDraw': true,
    'thickness': 0.2,
    'tickColorizeValues': true,
    'skin':'tron'
})         

    var tmr = self.setInterval(function(){myDelay()},1000);        
    var m = 0;
    function myDelay(){
        m += 10;
        $('.dial').val(m).trigger('change');
        if(m==100) {            
            window.clearInterval(tmr);
        }
    }    
});‚Äč

Here is the jsFiddle example: http://jsfiddle.net/salih0vicX/PTM6R/1/