3

我为我的工作构建了一个动画框架，并且我在队列或链式效果部分中存货，实际上我有这样的东西：

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？？！谢谢

4

1 回答 1

4

简单演示

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();
于 2010-10-31T20:03:09.943 回答