Jquery源码分析－－-FX分析

核心提示： 先看一下show或hidden：show: function(){// 保存当前的，以被修改之后能得到初始的值this.options.orig[this.prop]=jQuery.attr(this.elem.style,this.prop);this.options.show = tr

先看一下show或hidden：

show: function(){
// 保存当前的，以被修改之后能得到初始的值
this.options.orig[this.prop]=jQuery.attr(this.elem.style,this.prop);
this.options.show = true;//标明是进行show操作
this.custom(0, this.cur());
//让最开始时以1px的宽或高度来显示。防止内容flash
if ( this.prop == "width" || this.prop == "height" )
　　　 this.elem.style[this.prop] = "1px";　　　
jQuery(this.elem).show();
　　},
hide: function(){
// 保存当前的，以被修改之后能得到初始的值
this.options.orig[this.prop]=jQuery.attr(this.elem.style,this.prop);
this.options.hide = true;//标识是进行hide操作
this.custom(this.cur(), 0);　　},

show和hide是在指定元素的属性为show或hide的时候调用的，如height: "show", width: "show", opacity: "show"。它们都是先保存原始的改悔。之后调用custom来完成动画。和⑨处是一样的。

也就是说完成动画的工作在custom中：

// 开动一个动画
　　custom: function(from, to, unit){
　　　 this.startTime = now();//动画开始的时候
　　　 this.start = from;//位置开始点
　　　 this.end = to;//位置结果点
　　　 this.unit = unit || this.unit || "px";
　　　 this.now = this.start;//位置当前点
　　　 //state是时间间隔在总的duration的比率
　　　 //pos是按一定算法把时间上的比率折算到位置上的比率
　　　 this.pos = this.state = 0;
　　　 //根据this.now位置当前点的值来设定元素的属性显示出来
　　　 this.update();
　　
　　　 var self = this;
　　　 function t(gotoEnd){
　　　　　 return self.step(gotoEnd);// 调用step(gotoEnd)//本对象的
　　　 }
　　　 t.elem = this.elem;//删除的时候做判断用
　　　 //timers栈是公共的，不同的元素的不同的属性step都是放在这里面。
　　　 jQuery.timers.push(t);
　　　 if ( jQuery.timerId == null ) {
　　　　　 jQuery.timerId = setInterval(function(){
　　　　　　　var timers = jQuery.timers;
　　　　　 //倒是觉得这里会有同步冲突的问题。Ext.observable中就有解决方法
　　　　　　　for ( var i = 0; i < timers.length; i++ )
　　　　　　　//当一个属性的动画完成，或强迫完成的时候，把step从数组中删除.
　　　　　　　//同时把i的位置不改变。继续下一个。
　　　　　　　if ( !timers[i]() )　timers.splice(i--, 1);　　　　　　　　　　
　　　　　　　　//说明还有属性的动画没有完成，step还在timers中。
　　　　　　　　//那么就不clearInterval，13ms之后再继续。直到数组
　　　　　　　　//中所有的step都被删除。
　　　　　　　if ( !timers.length ) {
　　　　　　　　　clearInterval( jQuery.timerId );
　　　　　　　　　jQuery.timerId = null;
　　　　　　　}
　　　　　 }, 13);
　　　 }
},