jQuery旋钮设置动画并更改颜色 [英] Jquery Knob animate and change color
本文介绍了jQuery旋钮设置动画并更改颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想创建一个可以在某个点切换颜色的旋钮.例如,在35处为红色,在70处为黄色,而100处为绿色.
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.
我也想让它动起来.
这是我的小提琴: 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'
})
});
推荐答案
您可以使用setInterval/clearInterval
函数来实现:
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);
}
}
});
这是jsFiddle示例: http://jsfiddle.net/PTM6R/597/
Here is the jsFiddle example: http://jsfiddle.net/PTM6R/597/
这篇关于jQuery旋钮设置动画并更改颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文