jQuery seq: execute code sequentially, for each selected element.

jquery.ba-seq.js

/*!
 * jQuery seq - v0.1 - 03/1/2011
 * http://benalman.com/
 * 
 * Copyright (c) 2011 "Cowboy" Ben Alman
 * Dual licensed under the MIT and GPL licenses.
 * http://benalman.com/about/license/
 */

(function($){

  $.fn.seq = function( fn, done ) {
    var elems = this;

    if ( elems.length ) {
      fn.call( elems[0], function() {
        $.fn.seq.call( elems.slice(1), fn, done );
      });
    } else if ( done ) {
      done();
    }

    return elems;
  };

})(jQuery);

usage.js

elems.hide().seq(function(next){
  $(this).fadeIn( 100, next );
});

elems.hide().seq(function(next){
  $(this).fadeIn( 100, next );
}, function(){
  console.log( "done!" );
});

(function loopy(elems){
  elems.hide().seq(function(next){
    $(this).fadeIn( 100, next );
  }, function(){
    loopy( elems.slice(1) );
  });
})( $("li") );

A very basic sample animation.

A sample animation (courtesy of simplestick, who created the original).

Possible todos:

• pass i, elem into callback (like each)
• return a deferred (is this even sane?)