очередь эффектов javascript (цепочка)

Question

я строю анимационную среду для своей работы, и я делаю запас в части эффектов очереди или цепочки, на самом деле у меня есть что-то вроде этого:

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

и т. Д. И т. Д. Итак, на самом деле я могу сделать:

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

и работает отлично! но fadeIn и animate выполняются одновременно, но я хочу сделать что-то вроде:

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

так что сначала выполняется анимация, а затем fadeIn

на самом деле у меня есть что-то вроде:

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 
    }

и я могу получить все вызываемые методы и тому подобное, но я не знаю, как передать это в массив или даже вызвать первый метод, потому что я пытаюсь получить все запросы к массиву и просто вызывать его каждый раз, если эффекты сделано.

Я не использую jQuery, как я уже сказал, мне нужно сделать персонализированную среду.

Любая идея pleeeasse ??! Спасибо

Answer 1

Простая демонстрация

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
    };
  }
};

Использование

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