欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2015年12月04日 11:23:34   作者：chua1989  
這篇文章主要介紹了Jquery1.9.1源碼分析系列（十五）動畫處理之外篇 的相關(guān)資料,需要的朋友可以參考下

a.動畫兼容Tween.propHooks

　　Tween.propHooks提供特殊情況下設(shè)置、獲取css特征值的方法，結(jié)構(gòu)如下

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

　　Tween.propHooks.scrollTop 和Tween.propHooks.scrollLeft兩個主要是在ie8離線狀態(tài)下會出現(xiàn)混亂而把css特征值保存到節(jié)點(diǎn)上

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

　　Tween.propHooks._default的get方法會嘗試直接從節(jié)點(diǎn)上取得css的tween.prop特征值，如果取不到則使用jQuery.css()方式來獲取。該方法處理中，簡單的值如“10px”會被解析為浮點(diǎn)數(shù)；復(fù)雜的值，如“旋轉(zhuǎn)（1rad）”返回原樣。并對返回結(jié)果再做處理：空字符串, null, undefined 和 "auto"都轉(zhuǎn)化為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 ];
  }
  //傳遞一個空字符串作為第三個參數(shù)的.css會自動嘗試parseFloat，
  //并返回到一個字符串，如果解析失敗的話。
  //所以，簡單的值，如“10px”會被被解析為浮點(diǎn)數(shù)。復(fù)雜的值，如“旋轉(zhuǎn)（1rad）”返回原樣。
  result = jQuery.css( tween.elem, tween.prop, "" );
  // 空字符串, null, undefined 和 "auto"都轉(zhuǎn)化為0
  return !result || result === "auto" ? 0 : result;
}

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

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封裝了一些用來執(zhí)行動畫動作的函數(shù)，結(jié)構(gòu)如下

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

　　詳細(xì)的源碼分析如下

jQuery.fx = Tween.prototype.init;
//每個時間點(diǎn)都會執(zhí)行的函數(shù)外殼，會取出jQuery.timers中的函數(shù)執(zhí)行
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;
};
//執(zhí)行參數(shù)中的函數(shù)并啟動計(jì)時
jQuery.fx.timer = function( timer ) {
  if ( timer() && jQuery.timers.push( timer ) ) {
    jQuery.fx.start();
  }
};
//計(jì)時步長
jQuery.fx.interval = 13;
//啟動計(jì)時
jQuery.fx.start = function() {
  if ( !timerId ) {
    timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
  }
};
//停止計(jì)時
jQuery.fx.stop = function() {
  clearInterval( timerId );
  timerId = null;
};
//動畫速度（完整動畫執(zhí)行時間）
jQuery.fx.speeds = {
  slow: 600,
  fast: 200,
  // Default speed
  _default: 400
};
//向下兼容<1.8擴(kuò)展點(diǎn)
jQuery.fx.step = {}; 
　　這里其中執(zhí)行動畫的關(guān)鍵源碼是
//動畫入口函數(shù)function Animation( elem, properties, options ){
　　...
　　jQuery.fx.timer(
　　　　jQuery.extend( tick, {
　　　　　　elem: elem,
　　　　　　anim: animation,
　　　　　　queue: animation.opts.queue
　　　　})
　　);
　　...
}
//執(zhí)行參數(shù)中的函數(shù)并啟動計(jì)時
jQuery.fx.timer = function( timer ) {
  if ( timer() && jQuery.timers.push( timer ) ) {
    jQuery.fx.start();
  }
};
//計(jì)時步長
jQuery.fx.interval = 13;
//啟動計(jì)時
jQuery.fx.start = function() {
  if ( !timerId ) {
    timerId = setInterval( jQuery.fx.tick, jQuery.fx.interval );
  }
};

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

　　動畫的分析就到這里。下面把動畫相關(guān)的api列一下

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

jQuery.fn. fadeTo([speed,]opacity[,callback])（將被選元素的不透明度逐漸地改變?yōu)橹付ǖ闹担?br />

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

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

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

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

相關(guān)文章

最新評論