Easing the excution flow in JS/JQuery
<p>Easing the excution flow in JS/JQuery
I've loop like this:</p>

<pre><code>for (int i = 0; i &lt; 100; i++)
{ 
   doSomething(...); // returns momentally
}
</code></pre>

<p>I'm looking for a way to apply easing to the execution flow - by giving a total duration and an easing pattern (ex. 2 seconds &amp; easeback). Is is something doable in JS (I'm using jQuery too)?</p>

<hr>

<p><strong>Update 2</strong> Updated to clarify the question - I'm looking for the following:</p>

<p><strong>Update 3</strong> - Sheikh Heera is right, the sample I gave doesn't illustrate the real problem, execute function is updated to call an external module, which is closer to what I have. I don't see how jQuery's animate can be applied directly for calling functions.</p>

<pre><code>easer.ease({ start: 0, 
   end: 100, 
   duration: 900, 
   easing: "easeOutBounce",
   execute: function (e) { ExternalModule.DoSomethingUseful(e); } });
</code></pre>

<p>where <code>start</code> the <code>end</code> are integers, specifying the animated range, <code>duration</code> is animation duration in milliseconds, <code>easing</code> is the easing pattern used to animate the values within a range, <code>execute</code> - the function which gets called with values from <code>0</code> to <code>100</code>, using the easing pattern supplied in the sample above it will animate myDiv's height from <code>0</code> to <code>100</code> within <code>0.9</code> seconds using <code>easeOutBounce</code> easing function. </p>

<p>Ideally as a small standalone plugin based on <code>jQuery</code>, definitely not part of <code>Mootools</code> or any other heavy hitters I can't afford bringing them in just for that.</p>
