jQuery 손잡이 업데이트 값과 애니메이션 적용

Question

jQuery 손잡이를 사용하여 시계를 작성하려고합니다. 내 시계가 작동 중입니다 (http://jsfiddle.net/Misiu/9Whck/1/),하지만 지금은 일부 추가 기능을 추가하려고합니다.
처음에는 모든 노브를 0으로 설정 한 다음 animate을 사용하여 해당 값을 현재 시간에 적용한 다음 일반 타이머 업데이트를 시작하려고합니다.

내 코드 (데모 여기 : http://jsfiddle.net/Misiu/cvQED/81/를) 다음과 같습니다 when에서

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

내가 별도로 각 노브에 대한 애니메이션을 호출해야합니다,하지만 난 data-targetValue를 사용할 때 내부에 하나의 애니메이션을하고 싶습니다 .

이 작업을 수행 할 수 있습니까?

Answer 1

당신은 당신이

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

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