jqueryアニメーションを手動で制御するように変更する

Question

私はjqueryのアニメーション機能を、すべてを手動で制御できる機能に変更したいと思います。現在、コードは複数の数値を遅延させて増加させます。ここでは、コードは（https://jsfiddle.net/6mrLv1ma/8/）です：

var ammount = 10; 
 
var duration = 0.5; 
 
var delay = (1-duration)/ammount; // 0.05 
 

 
curDelay = 0; 
 
for(var i=0;i<ammount;i++) { 
 
\t $("#container").append("<div id='output"+i+"'>0</div>"); 
 
\t \t setTimeout(
 
\t \t \t (function(i) { 
 
\t \t \t \t return function() { 
 
\t \t \t \t \t animate(i, duration); 
 
\t \t \t \t } 
 
\t \t \t })(i, duration),curDelay*1000); 
 
\t \t curDelay += delay; 
 
} 
 

 
function animate(i, duration){ 
 
\t $({value: 0}).animate({value: 1}, { 
 
\t \t duration: duration*1000, 
 
\t \t step: function() { 
 
    \t var placement = "output"+i; 
 
\t \t \t document.getElementById(placement).innerHTML = this.value; 
 
\t \t } 
 
\t }) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"></div>

ここでそれが働いているかのグラフです：

currentProcは= 0.2のであれば、出力はこのようなものでなければなりません。

0.3 
0.16 
0.07 
0 
0 
0 
0 
0 
0 
0 

私はすでに開始したが、式（https://jsfiddle.net/18kd85hn/1/）との助けが必要：

var ammount = 10; 
 
var duration = 0.5; 
 
var delay = (1-duration)/ammount; // 0.05 
 

 
function myFunction(currentProc){ // currentProc value 0 - 1 
 
\t var values = []; 
 
\t for(var i = 0; i<ammount;i++){ 
 
\t \t var currentPos = i*delay; // formula 
 
\t \t \t 
 
\t \t document.getElementById("output").innerHTML += "<br>"+currentPos; 
 
\t } 
 
} 
 

 
myFunction(0.2)

<div id="output">output:</div>

Answer 1

がそれ（https://jsfiddle.net/18kd85hn/7/）

var value = 1-(i*delay+duration-currentProc)/duration; 

if (value<0){value =0} 
if (value>1){value =1} 

、交換jqueryのアニメーションを手に入れた - https://jsfiddle.net/18kd85hn/8/