Javascript очереди эффектов (цепь)

Question

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

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

и т.д. и т.п ... так, фактически я могу сделать:

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

и он отлично работает! но FadeIn и одушевленные выполнить в то же самое время, но то, что я хочу сделать, это что-то вроде:

$('#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

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

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

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