Question

Easing the excution flow in JS/JQuery
I’ve loop like this:

for (int i = 0; i < 100; i++)
{ 
   doSomething(...); // returns momentally
}

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 & easeback). Is is something doable in JS (I’m using jQuery too)?

---

Update 2 Updated to clarify the question – I’m looking for the following:

Update 3 – 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.

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

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

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

Answer 1

To my best, I tried to achieve the thing you want using jQuery “animate” property.

Using this jQuery property will allow to add “easing”, “duration”, “callback” etc as needed by you. I used the “step” property to achieve this.

In order to work, you need to add a “dummy” tag to the HTML and hide it.

DEMO: http://jsfiddle.net/vaakash/Wtqm3/

HTML

<!-- Add a dummy tag to apply animate property -->
<span class="holder" style="display:none" ></span>​

jQuery

$('.holder').animate(
    {
        'end': 100 // There is no such "end" css property just using as an end mark
    },
    {
        duration: 500,
        step: function(now, fx) {
            myFunction(now); // Call your function here with the "now" param (i.e ExternalModule.DoSomethingUseful(now) ) in your case                      
        }
        // Add easing property if wanted
    }
);

// The function
function myFunction(param){
    $('body').append('Value now: ' + param + '</br/>');
}​

Hope this helps.