When you iterate over jQuery objects using $('img').each(); your callback function runs instantly on each element, but what if you wanted to apply .addClass() on each element in order rather than simultaneously? Example:
Place the callback functions inside window.setTimeout() window.requestTimeout()duration * i where i is the step number. Example:
Which is exactly what jQuery.eachStep is doing behind the scenes!
$.eachStep( Duration, function(index, Element, duration) ) For use with jQuery Objects
Duration Optional string or number determining how long the step will run. default: 200ms 1
function(index, Element, duration) A function to execute for each matched element.
jQuery.eachStep( Collection, Duration, function(index, Element, duration) ) For use with Collections or Maps
Collection The object or array to iterate over.
Duration Optional string or number determining how long the step will run. default: 200ms 1
function(index, Element, duration) A function to execute for each matched element.
1 - Due to limitations with ... This has been resolved as of version 0.2, using an improved window.setTimeout method: http://blog.joelambert.co.uk/2011/06/01/a-better-settimeoutsetinterval/
window.setTimeout the actual duration time may be capped at around 4ms to 10ms. (see: https://developer.mozilla.org/En/Window.setTimeout#section_7)
Click view source on the DEMOs above for more usage examples!
requestAnimFrame, thanks to @jackrugile for pointing it out!