JavaScript特效隊列（鏈）

Question

IM建設對我的工作的動畫框架，和IM股票在隊列或連鎖反應的一部分，其實我有這樣的事情：

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

等等等等......所以，其實我可以這樣做：

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

它工作出色！但淡入和動畫執行在同一時間，但我想要做的，是一樣的東西：

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

所以它首先執行動畫，然後淡入

其實我有類似：

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();