JQuery Knob animates and changes color

Question

I would like to create a pen that changes color at some point. For example, with 35 red, with 70 yellow, and 100 green.

I would also like to make it animated.

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 1

You can accomplish this with the 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 a jsFiddle example: http://jsfiddle.net/PTM6R/597/