Jquery源码分析---FX分析
2010-09-14 13:39:01 来源:WEB开发网先看一下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);
}
},
更多精彩
赞助商链接