Jquery源码分析---FX分析
2010-09-14 13:39:01 来源:WEB开发网 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻鐔兼⒒鐎靛壊妲紒鐐劤缂嶅﹪寮婚悢鍏尖拻閻庨潧澹婂Σ顔剧磼閻愵剙鍔ょ紓宥咃躬瀵鎮㈤崗灏栨嫽闁诲酣娼ф竟濠偽i鍓х<闁诡垎鍐f寖闂佺娅曢幑鍥灳閺冨牆绀冩い蹇庣娴滈箖鏌ㄥ┑鍡欏嚬缂併劎绮妵鍕箳鐎n亞浠鹃梺闈涙搐鐎氫即鐛崶顒夋晬婵絾瀵ч幑鍥蓟閻斿摜鐟归柛顭戝枛椤牆顪冮妶搴′簼缂侇喗鎸搁悾鐑藉础閻愬秵妫冮崺鈧い鎺戝瀹撲礁鈹戦悩鎻掝伀缁惧彞绮欓弻娑氫沪閹规劕顥濋梺閫炲苯澧伴柟铏崌閿濈偛鈹戠€n€晠鏌嶆潪鎷屽厡闁汇倕鎳愮槐鎾存媴閸撴彃鍓卞銈嗗灦閻熲晛鐣烽妷褉鍋撻敐搴℃灍闁绘挻娲橀妵鍕箛闂堟稐绨肩紓浣藉煐濮樸劎妲愰幘璇茬闁冲搫鍊婚ˇ鏉库攽椤旂》宸ユい顓炲槻閻g兘骞掗幋鏃€鐎婚梺瑙勬儗閸樺€熲叺婵犵數濮烽弫鍛婃叏椤撱垹纾婚柟鍓х帛閳锋垶銇勯幒鍡椾壕缂備礁顦遍弫濠氱嵁閸℃稒鍊烽柛婵嗗椤旀劕鈹戦悜鍥╃У闁告挻鐟︽穱濠囨嚃閳哄啰锛滈梺褰掑亰閸欏骸鈻撳⿰鍫熺厸閻忕偟纭堕崑鎾诲箛娴e憡鍊梺纭呭亹鐞涖儵鍩€椤掑啫鐨洪柡浣圭墪閳规垿鎮欓弶鎴犱桓闂佸湱枪閹芥粎鍒掗弮鍫熷仺缂佸顕抽敃鍌涚厱闁哄洢鍔岄悘鐘绘煕閹般劌浜惧┑锛勫亼閸婃牠宕濋敃鈧…鍧楀焵椤掍胶绠剧€光偓婵犱線鍋楀┑顔硷龚濞咃絿妲愰幒鎳崇喓鎷犻懠鑸垫毐闂傚倷鑳舵灙婵炲鍏樺顐ゆ嫚瀹割喖娈ㄦ繝鐢靛У绾板秹寮查幓鎺濈唵閻犺櫣灏ㄥ銉р偓瑙勬尭濡繂顫忛搹鍦<婵☆垰鎼~宥囩磽娴i鍔嶉柟绋垮暱閻g兘骞嬮敃鈧粻濠氭偣閸パ冪骇鐎规挸绉撮—鍐Χ閸℃ê闉嶇紓浣割儐閸ㄥ墎绮嬪澶嬪€锋い鎺嶇瀵灝鈹戦埥鍡楃仯闁告鍕洸濡わ絽鍟崐鍨叏濡厧浜鹃悗姘炬嫹

先看一下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);
}
},
更多精彩
赞助商链接