jQuery1.5.1 animate方法源碼閱讀
更新時(shí)間:2011年04月05日 21:40:38 作者:
jquery本身的動(dòng)畫(huà)較之mootools,總體上感覺(jué)稍微有點(diǎn)遜色,不過(guò)因?yàn)槠溆袕?qiáng)大的插件,加上API易讀型,易用性等備受青睞,在動(dòng)畫(huà)效果方面,API提供了比如一些比較實(shí)用的Effects,下面是main方法animate
復(fù)制代碼 代碼如下:
/*7536-7646*/
animate: function( prop, speed, easing, callback ) {
if ( jQuery.isEmptyObject( prop ) ) {
return this.each( optall.complete );
}
//#7864行this.options.complete.call( this.elem )使得其可以不斷的連續(xù)執(zhí)行動(dòng)畫(huà),比如$(‘selector').animate({prop1},speed1).animate({prop2},speed2)這樣的動(dòng)畫(huà)隊(duì)列;
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;
//要執(zhí)行動(dòng)畫(huà)的prop,prop一般是一個(gè)plainObj,形如{key1:value1,key2:value2};
for ( p in prop ) {
//駝峰改寫(xiě),有些比如magrin-top需要變成駝峰的屬性即變成marginTop;見(jiàn)cameCase方法;
var name = jQuery.camelCase( p );
//fix屬性;主要是前面camelcase的屬性;
if ( p !== name ) {
prop[ name ] = prop[ p ];
delete prop[ p ];
p = name;
}
//如果執(zhí)行$(..).show||$(..).hide;如果這個(gè)元素本身是hidden,而動(dòng)畫(huà)里面又寫(xiě)hide,直接運(yùn)行callbacks就可以了;
if ( prop[p] === "hide" && hidden || prop[p] === "show" && !hidden ) {
return opt.complete.call(this);
}
//如果prop[key]==(height||width)并且是一個(gè)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]是一個(gè)數(shù)組;只用第一個(gè)值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 ) {
//如果動(dòng)畫(huà)元素的overflow已經(jīng)被設(shè)置的情況下,把它暫時(shí)為hidden;
this.style.overflow = "hidden";
}
//當(dāng)前動(dòng)畫(huà)鍵值對(duì),其實(shí)就是prop;
opt.curAnim = jQuery.extend({}, prop);
//這里便是動(dòng)畫(huà)的核心了,對(duì)每一個(gè)prop[key]進(jìn)行處理;
jQuery.each( prop, function( name, val ) {
//獲取一個(gè)Fx對(duì)象;傳入的每一個(gè)參數(shù)都被設(shè)置成為這個(gè)對(duì)象的屬性;其中self是指動(dòng)畫(huà)元素自身;opt是前面產(chǎn)生的對(duì)象;
var e = new jQuery.fx( self, opt, name );
//當(dāng)執(zhí)行show||hide操作的時(shí)候prop==fxAttrs(參見(jiàn)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等將被設(shè)置為0;
start = e.cur();
if ( parts ) {
//end是指變化量的大小,比如:{left:-=66px},那么end=66;
var end = parseFloat( parts[2] ),
//單元運(yùn)算符,就是px,%;如果是一些不能帶單位的,比如z-index,設(shè)置為空,否則就設(shè)置為px;
unit = parts[3] || ( jQuery.cssNumber[ name ] ? "" : "px" );
// We need to compute starting value
//如果不是px,比如%,em等等;
if ( unit !== "px" ) {
//設(shè)置該屬性值name為(end || 1) + unit,如果end=0;設(shè)置為1;開(kāi)始值被設(shè)置為start = ((end || 1) / e.cur()) * start;
jQuery.style( self, name, (end || 1) + unit);
//這里e.cur()和前面的start = e.cur();是不一樣的,因?yàn)閖Query.style( self, name, (end || 1) + unit)的執(zhí)行使得start被改變;用于處理end=0的情況;因?yàn)閑.cur()作為除數(shù),不能為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相應(yīng)的被設(shè)置為運(yùn)算后的變量值;
end = ((parts[1] === "-=" ? -1 : 1) * end) + start;
}
e.custom( start, end, unit );
//如果沒(méi)有數(shù)字化的運(yùn)算;那么沒(méi)傳入的只能是'';
} else {
e.custom( start, val, "" );
}
}
});
// For JS strict compliance
return true;
});
},
相關(guān)文章
jQuery自定義元素右鍵點(diǎn)擊事件(實(shí)現(xiàn)案例)
下面小編就為大家?guī)?lái)一篇jQuery自定義元素右鍵點(diǎn)擊事件(實(shí)現(xiàn)案例)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
jquery實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)功能
本文主要介紹了用的jqueryRotate插件實(shí)現(xiàn)轉(zhuǎn)盤(pán)抽獎(jiǎng)功能的方法,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧
2017-01-01
JQuery表格內(nèi)容過(guò)濾的實(shí)現(xiàn)方法
使用JQuery 實(shí)現(xiàn)一個(gè)表格內(nèi)容 過(guò)濾的功能,有需要的朋友可以參考一下,代碼如下:
2013-07-07
jQuery實(shí)現(xiàn)的淡入淡出圖片輪播效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的淡入淡出圖片輪播效果,涉及jQuery基于定時(shí)器的頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-08-08
jQuery hover事件簡(jiǎn)單實(shí)現(xiàn)同時(shí)綁定2個(gè)方法
這篇文章主要介紹了jQuery hover事件簡(jiǎn)單實(shí)現(xiàn)同時(shí)綁定2個(gè)方法,可實(shí)現(xiàn)同時(shí)綁定懸停與離開(kāi)事件的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2016-06-06
jQuery 連續(xù)列表實(shí)現(xiàn)代碼
你有沒(méi)有手工的編寫(xiě)過(guò)一些重復(fù)的代碼?你也覺(jué)得它們是如此的無(wú)聊吧。好了,這里有更好的解決辦法。
2009-12-12
jquery 獲取dom固定元素 添加樣式的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery獲取dom固定元素 添加樣式的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
2014-02-02 
