javascript effects queue (chain)

Question

Hi, im building an animation framework for my work, and im stock in the Queue or chain effects part, actually i have something like this:

var Fx = {
    animate: function(){...},
    fadeIn: function(){...},
    fadeOut: function(){...}
}

etc etc... so, actually i can do:

$('#element').animate({options}).fadeIn({options});

and it works excellent! but the fadeIn and the animate execute at the same time but what i want to do, is something like:

$('#element').chain().animate({options}).fadeIn({options});

so it execute the animate first and then the fadeIn

actually i have something like:

var Chain = function(element){
 var target = element;
 for (methodName in Fx) {

  (function(methodName) {
    Chain.prototype[methodName] = function() {
     var args = Array.prototype.slice.call(arguments);
    return this;
    };
  })(methodName);
 }
}

Fx.chain = function(element){
  return 
    }

and i can get all the methods called and that stuff, but i dont know how to push that to an array or even call the first method, because im trying to get all requests to an array and just call it everytime if effects is done.

im not use jQuery, as i said i need to make a personalized framework.

Any idea pleeeasse??! Thank you

Answer 1

Simple Demo

var Fx = {
  animate: function(el, style, duration, after){
    // do animation...
    after();
  },
  fadeIn: function(el, duration, after){
    // do fading ...
    after();
  }, 
  // other effects ...

  chain: function (el) {

    var que = [];
    function callNext() { que.length && que.shift()(); }

    return {
      animate: function(style, duration) {
        que.push(function() {
          Fx.animate(el, style, duration, callNext);
        });
        return this;
      },
      fadeIn: function(duration){
        que.push(function() {
          Fx.fadeIn(el, duration, callNext);
        });
        return this;
      }, // ...
      end: callNext
    };
  }
};

Usage

Fx.chain(el).animate("style", 300).fadeIn(600).animate("style2", 900).end();