开发者

javascript effects queue (chain)

开发者 https://www.devze.com 2023-01-22 14:48 出处:网络
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:

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

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号