Javascript jQuery旋钮使用animate更新值

我正在尝试使用jQuery旋钮构建时钟。 我的时钟正在工作（），但现在我正在尝试添加一些额外的功能。
开始时，我希望将所有旋钮设置为0，然后使用

动画设置

将其值设置为当前时间，然后开始正常的计时器更新。

我的代码如下所示（此处演示：）：

在

when

中，我必须分别为每个旋钮调用animate，但我希望使用

data targetValue

，并在when中仅使用一个animate

---

可以这样做吗？

如果您想使用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();
});    

或者没有，每个都有

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

---

如果您想使用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();
});    

或者没有，每个都有

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

---

我试过了，但没有运气，非常感谢！我试过了，但没有任何运气，非常感谢！