帶有動畫的jQuery旋鈕更新值

Question

我試圖用jQuery旋鈕構建時鐘。 我的時鐘正在工作（http://jsfiddle.net/Misiu/9Whck/1/），但現在我正在嘗試添加一些額外功能。
在開始時，我想將所有旋鈕設置爲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我必須調用動畫的單獨每一個旋鈕，但我想用data-targetValue並且當有內只有一個動畫。

可以這樣做嗎？

Answer 1

，如果你想使用數據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/
或沒有。每次

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

http://jsfiddle.net/cvQED/84/