我正在为我的工作构建一个动画框架,并且我在队列或链效应部分中存货,实际上我有这样的东西:
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,因为我说过我需要制作一个个性化的框架。
有什么想法吗??!谢谢
最佳答案
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();
关于javascript 效果队列(链),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4064746/