Jquery Knob动画并改变颜色

时间:2012-11-09 19:56:21

标签: jquery

我想创建一个在某个时刻切换颜色的旋钮。例如,35为红色,70为黄色,100为绿色。

我也想让它变得有生气。

这是我的小提琴:http://jsfiddle.net/Tropicalista/jUELj/6/

我的代码是:

    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'
    })         

});

1 个答案:

答案 0 :(得分:6)

您可以使用setInterval/clearInterval函数完成此操作:

$(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);
        }
    }    
});​

以下是jsFiddle示例:http://jsfiddle.net/PTM6R/597/