jQuery1.5.1 animate方法源碼閱讀

複製代碼 代碼如下:
/*7536-7646*/
animate: function( prop, speed, easing, callback ) {
if ( jQuery.isEmptyObject( prop ) ) {
return this.each( optall.complete );
}
//#7864行this.options.complete.call( this.elem )使得其可以不斷的連續執行動畫，比如$(‘selector').animate({prop1},speed1).animate({prop2},speed2)這樣的動畫隊列；
return this[ optall.queue === false ? "each" : "queue" ](function() {
// XXX 'this' does not always have a nodeName when running the
// test suite
var opt = jQuery.extend({}, optall), p,
isElement = this.nodeType === 1,
hidden = isElement && jQuery(this).is(":hidden"),
self = this;
//要執行動畫的prop，prop一般是一個plainObj，形如{key1:value1,key2:value2}；
for ( p in prop ) {
//駝峰改寫，有些比如magrin-top需要變成駝峰的屬性即變成marginTop；見cameCase方法；
var name = jQuery.camelCase( p );
//fix屬性；主要是前面camelcase的屬性；
if ( p !== name ) {
prop[ name ] = prop[ p ];
delete prop[ p ];
p = name;
}
//如果執行$(..).show||$(..).hide；如果這個元素本身是hidden，而動畫裡面又寫hide，直接運行callbacks就可以了;
if ( prop[p] === "hide" && hidden || prop[p] === "show" && !hidden ) {
return opt.complete.call(this);
}
//如果prop[key]==（height||width）並且是一個dom元素；需要有些特殊的處理；
if ( isElement && ( p === "height" || p === "width" ) ) {
// Make sure that nothing sneaks out
// Record all 3 overflow attributes because IE does not
// change the overflow attribute when overflowX and
// overflowY are set to the same value
opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ];

// Set display property to inline-block for height/width
// animations on inline elements that are having width/height
// animated
if ( jQuery.css( this, "display" ) === "inline" &&
jQuery.css( this, "float" ) === "none" ) {
if ( !jQuery.support.inlineBlockNeedsLayout ) {
this.style.display = "inline-block";

} else {
var display = defaultDisplay(this.nodeName);

// inline-level elements accept inline-block;
// block-level elements need to be inline with layout
if ( display === "inline" ) {
this.style.display = "inline-block";

} else {
this.style.display = "inline";
this.style.zoom = 1;
}
}
}
}
//如果prop[key]是一個數組；只用第一個值prop[p][0]；
if ( jQuery.isArray( prop[p] ) ) {
// Create (if needed) and add to specialEasing
(opt.specialEasing = opt.specialEasing || {})[p] = prop[p][1];
prop[p] = prop[p][0];
}
}

if ( opt.overflow != null ) {
//如果動畫元素的overflow已經被設定的情況下，把它暫時為hidden；
this.style.overflow = "hidden";
}
//當前動畫索引值對，其實就是prop；
opt.curAnim = jQuery.extend({}, prop);
//這裡便是動畫的核心了，對每一個prop[key]進行處理；
jQuery.each( prop, function( name, val ) {
//擷取一個Fx對象；傳入的每一個參數都被設定成為這個對象的屬性；其中self是指動畫元素自身；opt是前面產生的對象；
var e = new jQuery.fx( self, opt, name );
//當執行show||hide操作的時候prop==fxAttrs（參見show||hide方法）
if ( rfxtypes.test(val) ) {
e[ val === "toggle" ? hidden ? "show" : "hide" : val ]( prop );
} else {
var parts = rfxnum.exec(val),
//start儲存了初始值，它可能在style，也可能在css中，如果該值==null，undefiend，auto，0等將被設定為0；
start = e.cur();
if ( parts ) {
//end是指變化量的大小，比如：{left：-=66px}，那麼end=66；
var end = parseFloat( parts[2] ),
//單元運算子，就是px，%；如果是一些不能帶單位的，比如z-index，設定為空白，否則就設定為px；
unit = parts[3] || ( jQuery.cssNumber[ name ] ? "" : "px" );
// We need to compute starting value
//如果不是px，比如%，em等等；
if ( unit !== "px" ) {
//設定該屬性值name為(end || 1) + unit，如果end=0；設定為1；開始值被設定為start = ((end || 1) / e.cur()) * start;
jQuery.style( self, name, (end || 1) + unit);
//這裡e.cur()和前面的start = e.cur();是不一樣的，因為jQuery.style( self, name, (end || 1) + unit)的執行使得start被改變；用於處理end=0的情況；因為e.cur()作為除數，不能為0；
start = ((end || 1) / e.cur()) * start;
jQuery.style( self, name, start + unit);
}

// If a +=/-= token was provided, we're doing a relative animation
if ( parts[1] ) {
//end相應的被設定為運算後的變數值；
end = ((parts[1] === "-=" ? -1 : 1) * end) + start;
}
e.custom( start, end, unit );
//如果沒有數字化的運算；那麼沒傳入的只能是''；
} else {
e.custom( start, val, "" );
}
}
});

// For JS strict compliance
return true;
});
},