im building an a开发者_C百科nimation 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
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();
精彩评论