Jquery1.9.1源碼分析系列（十五）動畫處理之外篇

a.動畫兼容Tween.propHooks

　　Tween.propHooks提供特殊情況下設置、獲取css特征值的方法，結構如下

Tween.propHooks = {  _default: {    get: function(){...},    set: function(){...}  },  scrollTop: {    set: function(){...}  }  scrollLeft: {    set: function(){...}  }}

　　Tween.propHooks.scrollTop 和Tween.propHooks.scrollLeft兩個主要是在ie8離線狀態下會出現混亂而把css特征值保存到節點上

set: function( tween ) {  if ( tween.elem.nodeType && tween.elem.parentNode ) {    tween.elem[ tween.prop ] = tween.now;  }}

　　Tween.propHooks._default的get方法會嘗試直接從節點上取得css的tween.prop特征值，如果取不到則使用jQuery.css()方式來獲取。該方法處理中，簡單的值如“10px”會被解析為浮點數；復雜的值，如“旋轉（1rad）”返回原樣。并對返回結果再做處理：空字符串, null, undefined 和 "auto"都轉化為0；其他情況不變。

get: function( tween ) {  var result;  if ( tween.elem[ tween.prop ] != null &&    (!tween.elem.style || tween.elem.style[ tween.prop ] == null) ) {    return tween.elem[ tween.prop ];  }  //傳遞一個空字符串作為第三個參數的.css會自動嘗試parseFloat，  //并返回到一個字符串，如果解析失敗的話。  //所以，簡單的值，如“10px”會被被解析為浮點數。復雜的值，如“旋轉（1rad）”返回原樣。  result = jQuery.css( tween.elem, tween.prop, "" );  // 空字符串, null, undefined 和 "auto"都轉化為0  return !result || result === "auto" ? 0 : result;}

　　Tween.propHooks._default的set方法先會嘗試jQuery.fx.step[ tween.prop ]來設置向下兼容；否則會使用jQuery.style來設置css特征值；最極端情況則會將特征值直接保存在節點上

set: function( tween ) {  //使用step hook向下兼容 - 使用cssHook如果他存在 - 使用.style如果可用的話  //使用直接的特征值如果可用可用的話  if ( jQuery.fx.step[ tween.prop ] ) {    jQuery.fx.step[ tween.prop ]( tween );  } else if ( tween.elem.style && ( tween.elem.style[ jQuery.cssProps[ tween.prop ] ] != null || jQuery.cssHooks[ tween.prop ] ) ) {    jQuery.style( tween.elem, tween.prop, tween.now + tween.unit );  } else {    tween.elem[ tween.prop ] = tween.now;  }}

b. 動畫專用對象jQuery.fx

　　jQuery.fx封裝了一些用來執行動畫動作的函數，結構如下

jQuery.fx = {  tick = function () {...},//每個時間點都會執行的函數外殼，會取出jQuery.timers中的函數執行  timer = function ( timer ) {...},//執行參數中的函數并啟動計時  interval = 13, //計時步長  start = function () {...},//啟動計時  stop = function () {...},//停止計時  speeds = {slow: 600,fast: 200,_default: 400},//動畫速度（完整動畫執行時間）  step = {}//向下兼容<1.8擴展點}

　　詳細的源碼分析如下

jQuery.fx = Tween.prototype.init;//每個時間點都會執行的函數外殼，會取出jQuery.timers中的函數執行jQuery.fx.tick = function() {  var timer,  timers = jQuery.timers,  i = 0;  fxNow = jQuery.now();  for ( ; i < timers.length; i++ ) {    timer = timers[ i ];    // Checks the timer has not already been removed    if ( !timer() && timers[ i ] === timer ) {      timers.splice( i--, 1 );    }  }  if ( !timers.length ) {    jQuery.fx.stop();  }  fxNow = undefined;};//執行參數中的函數并啟動計時jQuery.fx.timer = function( timer ) {  if ( timer() && jQuery.timers.push( timer ) ) {    jQuery.fx.start();  }};//計時步長jQuery.fx.interval = 13;//啟動計時jQuery.fx.start = function() {  if ( !timerId ) {    timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );  }};//停止計時jQuery.fx.stop = function() {  clearInterval( timerId );  timerId = null;};//動畫速度（完整動畫執行時間）jQuery.fx.speeds = {  slow: 600,  fast: 200,  // Default speed  _default: 400};//向下兼容<1.8擴展點jQuery.fx.step = {}; 　　這里其中執行動畫的關鍵源碼是//動畫入口函數function Animation( elem, properties, options ){　　...　　jQuery.fx.timer(　　　　jQuery.extend( tick, {　　　　　　elem: elem,　　　　　　anim: animation,　　　　　　queue: animation.opts.queue　　　　})　　);　　...}//執行參數中的函數并啟動計時jQuery.fx.timer = function( timer ) {  if ( timer() && jQuery.timers.push( timer ) ) {    jQuery.fx.start();  }};//計時步長jQuery.fx.interval = 13;//啟動計時jQuery.fx.start = function() {  if ( !timerId ) {    timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );  }};

　　變量jQuery.timers = [];用來保存每次tick需要執行的函數列表。一般來說就只有一個函數，就是Animation函數中定義的tick函數。jQuery.fx.interval可以用來設置動畫每兩幀之間的時間間隔，默認為13毫秒。

　　動畫的分析就到這里。下面把動畫相關的api列一下

jQuery.fn.show([ duration ] [, easing ] [, complete ] | options )（顯示所有匹配的元素。此外，你還可以指定元素顯示的過渡動畫效果。如果元素本身是可見的，則不對其作任何改變。如果元素是隱藏的，則使其可見。與該函數相對的是hide()函數，用于隱藏所有匹配的元素）

jQuery.fn.hide([ duration ] [, easing ] [, complete ] | options)（隱藏所有匹配的元素。此外，你還可以指定元素隱藏的過渡動畫效果。如果元素本身是不可見的，則不對其作任何改變。如果元素是可見的，則將其隱藏。）

jQuery.fn.toggle([ duration ] [, easing ] [, complete ] | options)（切換所有匹配的元素。此外，你還可以指定元素切換的過渡動畫效果。所謂"切換"，也就是如果元素當前是可見的，則將其隱藏；如果元素當前是隱藏的，則使其顯示(可見)。）

這里介紹的toggle()函數用于切換元素的顯示/隱藏。jQuery還有一個同名的事件函數toggle()，用于綁定click事件并在觸發時輪流切換執行不同的事件處理函數。

jQuery.fn.slideDown([ duration ] [, easing ] [, complete ] | options)（顯示所有匹配的元素，并帶有向下滑動的過渡動畫效果。向下滑動的動畫效果，即元素可見區域的高度從0逐漸增大到其原有高度(向下逐漸展開)。如果元素本身是可見的，則不對其作任何改變。如果元素是隱藏的，則使其可見。

與該函數相對的是slideUp()函數，用于隱藏所有匹配的元素，并帶有向上滑動的過渡動畫效果）

jQuery.fn.slideUp([ duration ] [, easing ] [, complete ] | options)（隱藏所有匹配的元素，并帶有向上滑動的過渡動畫效果。向上滑動的動畫效果，即元素可見區域的高度從原有高度逐漸減小到0(向上逐漸收起)。如果元素本身是隱藏的，則不對其作任何改變。如果元素是可見的，則將其隱藏）

jQuery.fn.slideToggle([ duration ] [, easing ] [, complete ] | options)（切換所有匹配的元素，并帶有滑動的過渡動畫效果。所謂"切換"，也就是如果元素當前是可見的，則將其隱藏(向上滑動)；如果元素當前是隱藏的，則使其顯示(向下滑動)）

jQuery.fn.fadeIn([ duration ] [, easing ] [, complete ] | options)（顯示所有匹配的元素，并帶有淡入的過渡動畫效果。淡入的動畫效果，即元素的不透明度的比例從0%逐漸增加到100%。如果元素本身是可見的，則不對其作任何改變。如果元素是隱藏的，則使其可見。與該函數相對的是fadeOut()函數，用于隱藏所有匹配的元素，并帶有淡出的過渡動畫效果）

jQuery.fn.fadeOut([ duration ] [, easing ] [, complete ] | options)（隱藏所有匹配的元素，并帶有淡出的過渡動畫效果。所謂"淡出"的動畫效果，即元素的不透明度的比例從100%逐漸減小到0%。如果元素本身是隱藏的，則不對其作任何改變。如果元素是可見的，則將其隱藏）

jQuery.fn.fadeToggle([ duration ] [, easing ] [, complete ] | options)（切換所有匹配的元素，并帶有淡入/淡出的過渡動畫效果。所謂"切換"，即如果元素當前是可見的，則將其隱藏(淡出)；如果元素當前是隱藏的，則使其顯示(淡入)）

jQuery.fn.animate(cssProperties [, duration ] [, easing ] [, complete ] | cssProperties, options)（執行一個基于css屬性的自定義動畫。你可以為匹配的元素設置css樣式，animate()函數將會執行一個從當前樣式到指定的css樣式的一個過渡動畫。例如：某個div元素的當前高度為100px，將其CSS height屬性設為200px，animate()將會執行一個將div元素的高度從100px逐漸增加到200px的過渡動畫）

jQuery.fn.delay(duration [, queueName ])（延遲隊列中下一項的執行。delay()可以將隊列中等待執行的下一個動畫延遲指定的時間后才執行。它常用在隊列中的兩個jQuery效果函數之間，從而在上一個動畫效果執行后延遲下一個動畫效果的執行時間。如果下一項不是效果動畫，則它不會被加入效果隊列中，因此該函數不會對它進行延遲調用）

jQuery.fn.stop([ queueName ] [, clearQueue [, jumpToEnd ] ])（停止當前匹配元素上正在運行的動畫。默認情況下，stop()函數只會停止當前正在運行的動畫。如果你使用animate()函數為當前元素設置了A、B、C這3段動畫，如果當前正在執行的動畫是A，則只會停止動畫A的執行，不會阻止動畫B和C的執行。當然，你也可以通過指定可選的選項參數來停止所有的動畫。停止動畫并不是恢復到該動畫執行前的狀況，而是直接停止，當前動畫執行到什么狀態，就停留在什么狀態。例如：執行一個元素高度從100px到200px的過渡動畫，當高度為150px時停止了該動畫，則當前高度仍然保持150px的現狀。如果該動畫設置了執行完畢后的回調函數，則不會執行該回調函數。）

jQuery.fn.finish([ queueName ])（立即完成隊列中的所有動畫。finish()會停止當前正在運行的動畫，刪除所有隊列中的動畫，并完成匹配元素的所有動畫）

jQuery.fn. fadeTo([speed,]opacity[,callback])（將被選元素的不透明度逐漸地改變為指定的值）

jQuery.fx.off（該屬性用于設置或返回是否全局性地禁用所有動畫。如果不對該屬性設置值，則返回表示是否全局性地禁用了動畫效果的布爾值。如果將該屬性設為true，將全局性地禁用所有動畫。所有正在執行的動畫隊列不會受到影響。尚未執行的任何動畫隊列都會在執行時立即完成，而不再帶有動畫效果。如果將該屬性設為false，將全局性地啟用動畫效果。

你可以在遇到以下情況時，需要禁用動畫效果：你在配置比較低的電腦上使用jQuery；某些用戶可能由于動畫效果而遇到了可訪問性問題。）

jQuery.fx.interval（該屬性用于設置或返回動畫的幀速(毫秒值)。jQuery.fx.interval屬性用于設置jQuery動畫每隔多少毫秒繪制一幀圖像(觸發一次樣式更改，瀏覽器可能會重新繪制當前頁面)。該值越小，則動畫的觸發次數越多，動畫效果也更明顯、更平滑，當然也就越耗費性能。更改該屬性值時，正在執行的動畫隊列將不受影響。尚未執行的任何動畫隊列都將按照更改后的幀速來繪制動畫效果）

以上內容是腳本之家小編給大家介紹的Jquery1.9.1源碼分析系列（十五）動畫處理之外篇，jQuery 1.9.1源碼分析系列（十五)之動畫處理，點擊了解詳情。