jQuery Knob使用animate更新值
我正在尝试使用jQuery Knob构建时钟。 我的时钟正在运行（ http://jsfiddle.net/Misiu/9Whck/1/ ），但是现在我正在尝试添加一些额外function。
开始时我希望将所有旋钮设置为0，然后使用animate我想将它们的值设置为当前时间的动画，然后启动正常的计时器更新。
我的代码看起来像这样（演示在这里： http ： //jsfiddle.net/Misiu/cvQED/81/ ）：
$.when( $('.h').animate({ value: h }, { duration: 1000, easing: 'swing', progress: function () { $(this).val(Math.round(this.value)).trigger('change'); } }), $('.m').animate({ value: m }, { duration: 1000, easing: 'swing', progress: function () { $(this).val(Math.round(this.value)).trigger('change'); } }), $('.s').animate({ value: s }, { duration: 1000, easing: 'swing', progress: function () { $(this).val(Math.round(this.value)).trigger('change'); } })).then(function () { myDelay(); }); function myDelay() { var d = new Date(), s = d.getSeconds(), m = d.getMinutes(), h = d.getHours(); $('.h').val(h).trigger("change"); $('.m').val(m).trigger("change"); $('.s').val(s).trigger("change"); setTimeout(myDelay, 1000) }
when我必须分别为每个旋钮调用动画when ，但是我想使用data-targetValue并且在内部只有一个动画。
可以这样做吗？
如果你想使用data-targetValue，你需要像这样改变你的js
$('.h').data('targetValue', h);//$('.h').attr('targetValue', h); $('.m').data('targetValue', m); $('.s').data('targetValue', s); //... $.when( $('.knob').each(function(){//each .knob $(this).animate({//animate to data targetValue value: $(this).data('targetValue') }, { duration: 1000, easing: 'swing', progress: function () { $(this).val(Math.round(this.value)).trigger('change') } }); }) ).then(function () { myDelay(); });
http://jsfiddle.net/cvQED/83/
或没有.each
$.when( $('.knob').animate({ value: 100 }, { duration: 1000, easing: 'swing', progress: function () { $(this).val(Math.round(this.value/100*$(this).data('targetValue'))).trigger('change') } }) ).then(function () { myDelay(); });