Generalized FxChain Solution

[David Nolen]

window.addEvent('domready', run);

var FxChain = new Class({

  name: "FxChain",

  Extends: Chain,
  Implements: Events,

  initialize: function()
  {
    this.chain(arguments);
    this.running = [];
  },

  callChain: function()
  {
    var fx = this.parent();
    if(fx)
    {
      this.running.push(fx);
      fx.addEvent('onComplete', this.callChain.bind(this));
    }
  },

  clearChain: function()
  {
    this.running.each(function(fx) {fx.cancel();});
    this.parent();
  }

});

var myChain;
function run()
{
  $('red').set('tween', {
    duration: 500,
    transition: Fx.Transitions.Cubic.easeIn
  });
  $('green').set('tween', {
    duration: 500,
    transition: Fx.Transitions.Cubic.easeOut
  });
  $('blue').set('tween', {
    duration: 500,
    transition: Fx.Transitions.Cubic.easeOut
  });

  myChain = new FxChain(
    function() { return $('red').get('tween').start('left', 200); },
    function() { return $('green').get('tween').start('left', 400); },
    function() { return $('blue').get('tween').start('left', 600); }
  );

  myChain.callChain();
}

Note that with FxChain you MUST return the animation as a return value of
each function in the chain.