Jquery源码分析－－-FX分析

核心提示： 分析上面的代码可以看出Queue的操作和each的操作是不太一样的，Each是对每个元素都执行fn函数，Jquery源码分析－－-FX分析(6)，而queue对于每个元素都把fn函数放到自已对应的cache中fx的属性中保存，是单个的fn的话，以便于fx对象的其它方法来使用这些参数，在⑥处

分析上面的代码可以看出Queue的操作和each的操作是不太一样的。Each是对每个元素都执行fn函数。而queue对于每个元素都把fn函数放到自已对应的cache中fx的属性中保存，是单个的fn的话，也立马运行。在②处和each的作用差不多。

在上面的代码，它还调用了queue(this, type, fn);来实现把把fn存到this元素的data中的对应的type中去。

// 为元素加上type的array的属性，或返回取到elem上type的值
var queue = function( elem, type, array ) {
　　if ( elem ){
　　　 type = type || "fx";
　　　 var q = jQuery.data( elem, type + "queue" );
　　　 if ( !q || array )
　　　 q = jQuery.data( elem, type + "queue", jQuery.makeArray(array) );
　　}
　　return q;
};

这个全局的函数就是在jQuery.data进一步封装，使它支持默认的fx type和array的类数组的参数。

Jquery这里的Queue实质上没有起到什么作用。它本来可以支持一个元素的的连续执行几个Queue的函数达到更丰富的动画的效果。估计这里是没有完成。

①②③④⑤⑥⑦⑧⑨⑩

jQuery.fx

⑤处animate为dom元素的每个指定的属性都生成了一个fx对象。

// 根据参数构成一个对象
　　fx: function( elem, options, prop ){
　　　 this.options = options;
　　　 this.elem = elem;
　　　 this.prop = prop;
　　
　　　 if ( !options.orig )
　　　　　 options.orig = {};
}

Fx函数是一个构建函数，仅仅是把参数变成本对象的属性。以便于fx对象的其它方法来使用这些参数。在⑥处就是通过调用fx的方法show或hidden来完成一个属性的逐渐的改变。在⑨是通过custom方法来直接进行一个动画。