Jquery1.9.1 siri analisis kod sumber (15) di luar pemprosesan animasi_jquery

a. Animasi serasi dengan Tween.propHooks

Tween.propHooks menyediakan kaedah untuk menetapkan dan mendapatkan nilai ciri css dalam keadaan istimewa Strukturnya adalah seperti berikut

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

Tween.propHooks.scrollTop dan Tween.propHooks.scrollLeft terutamanya disebabkan oleh kekeliruan apabila IE8 di luar talian dan nilai ciri css disimpan ke nod

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

Kaedah get Tween.propHooks._default akan cuba mendapatkan nilai ciri tween.prop css terus daripada nod Jika ia tidak boleh diperolehi, gunakan kaedah jQuery.css() untuk mendapatkannya. Semasa pemprosesan kaedah ini, nilai mudah seperti "10px" akan dihuraikan sebagai nombor titik terapung seperti "putaran (1rad)" akan dikembalikan sebagaimana adanya. Dan kemudian proses hasil yang dikembalikan: rentetan kosong, null, undefined dan "auto" ditukar kepada 0 syarat lain kekal tidak berubah.

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;
} 

Kaedah set Tween.propHooks._default akan terlebih dahulu mencuba jQuery.fx.step[ tween.prop ] untuk menetapkan keserasian ke belakang, jika tidak, jQuery.style akan digunakan untuk menetapkan nilai ciri css dalam yang paling ekstrem; kes, nilai ciri akan ditetapkan Simpan terus pada nod

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. Objek khusus animasi jQuery.fx

jQuery.fx merangkum beberapa fungsi yang digunakan untuk melaksanakan tindakan animasi Strukturnya adalah seperti berikut

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扩展点
} 

Analisis kod sumber terperinci adalah seperti berikut

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 );
  }
}; 

Pembolehubah jQuery.timers = []; digunakan untuk menyimpan senarai fungsi yang perlu dilaksanakan untuk setiap tanda. Secara umumnya, hanya terdapat satu fungsi, iaitu fungsi tick yang ditakrifkan dalam fungsi Animasi. jQuery.fx.interval boleh digunakan untuk menetapkan selang masa antara setiap dua bingkai animasi. Lalai ialah 13 milisaat.

Itu sahaja untuk analisis animasi. Di bawah ialah senarai API berkaitan animasi

jQuery.fn.show([ tempoh ] [, pelonggaran ] [, lengkap ] | pilihan ) (Memaparkan semua elemen padanan. Selain itu, anda juga boleh menentukan kesan animasi peralihan paparan elemen. Jika elemen itu sendiri adalah boleh dilihat, Jika elemen itu tersembunyi, jadikan ia kelihatan Bertentangan dengan fungsi ini ialah fungsi hide(), yang digunakan untuk menyembunyikan semua elemen yang sepadan)

jQuery.fn.hide([ tempoh ] [, pelonggaran ] [, lengkap ] | pilihan) (Sembunyikan semua elemen padanan. Selain itu, anda juga boleh menentukan kesan animasi peralihan untuk menyembunyikan elemen. Jika elemen itu sendiri tidak kelihatan , tiada perubahan dibuat pada elemen jika ia kelihatan )
.

jQuery.fn.toggle([ tempoh ] [, pelonggaran ] [, lengkap ] | pilihan) (togol semua elemen padanan. Selain itu, anda juga boleh menentukan kesan animasi peralihan penukaran elemen. Apa yang dipanggil "togol ", iaitu, Jika elemen itu kelihatan pada masa ini, sembunyikannya; jika elemen itu tersembunyi pada masa ini, jadikan ia kelihatan (kelihatan) )
.

Fungsi togol() yang diperkenalkan di sini digunakan untuk menukar paparan/sembunyi elemen. jQuery juga mempunyai fungsi acara dengan nama yang sama, toggle(), yang digunakan untuk mengikat acara klik dan bertukar untuk melaksanakan fungsi pemprosesan acara yang berbeza secara bergilir apabila dicetuskan.

jQuery.fn.slideDown([ tempoh ] [, pelonggaran ] [, lengkap ] | pilihan) (memaparkan semua elemen padanan dengan kesan animasi peralihan gelongsor ke bawah. Kesan animasi gelongsor ke bawah, iaitu elemen Ketinggian kawasan yang boleh dilihat meningkat secara beransur-ansur daripada 0 kepada ketinggian asalnya (berkembang secara beransur-ansur ke bawah jika elemen itu sendiri kelihatan, tiada perubahan dibuat padanya Jika elemen itu tersembunyi, ia akan kelihatan.

Kebalikan daripada fungsi ini ialah fungsi slideUp(), yang digunakan untuk menyembunyikan semua elemen padanan dengan kesan animasi peralihan gelongsor ke atas)

jQuery.fn.slideUp([ tempoh ] [, pelonggaran ] [, lengkap ] | pilihan) (sembunyikan semua elemen padanan dengan kesan animasi peralihan gelongsor ke atas. Kesan animasi gelongsor ke atas ialah kawasan elemen yang boleh dilihat Ketinggian secara beransur-ansur berkurangan daripada ketinggian asal kepada 0 (mengecut secara beransur-ansur ke atas).

jQuery.fn.slideToggle([ tempoh ] [, pelonggaran ] [, lengkap ] | pilihan) (menukar semua elemen padanan dengan kesan animasi peralihan gelongsor. Apa yang dipanggil "suis" bermakna jika elemen pada masa ini Jika unsur itu boleh dilihat, sembunyikannya (gelongsor ke atas);

jQuery.fn.fadeIn([ tempoh ] [, pelonggaran ] [, lengkap ] | pilihan) (memaparkan semua elemen padanan dengan kesan animasi peralihan pudar masuk. Kesan animasi pudar masuk ialah kelegapan elemen skala secara beransur-ansur meningkat daripada 0% kepada 100%. Jika elemen itu sendiri boleh dilihat, tiada perubahan dibuat padanya untuk menyembunyikan segala-galanya. Memadankan elemen dengan kesan animasi peralihan pudar)

jQuery.fn.fadeOut([ tempoh ] [, pelonggaran ] [, lengkap ] | pilihan) (sembunyikan semua elemen padanan dengan kesan animasi peralihan pudar. Apa yang dipanggil kesan animasi "fade out" ialah elemen Skala kelegapan dikurangkan secara beransur-ansur daripada 100% kepada 0%. Jika elemen itu sendiri disembunyikan, tiada perubahan dibuat padanya

jQuery.fn.fadeToggle([ tempoh ] [, pelonggaran ] [, lengkap ] | pilihan) (togol semua elemen padanan dengan kesan animasi peralihan fade-in/fade-out. Apa yang dipanggil "suis" bermakna jika elemen pada masa ini kelihatan, sembunyikannya (fade out);

jQuery.fn.animate(cssProperties [, duration ] [, easing ] [, complete ] | cssProperties, options) (melakukan animasi tersuai berdasarkan sifat css. Anda boleh menetapkan gaya css untuk elemen yang sepadan, fungsi animate( ) akan melaksanakan animasi peralihan daripada gaya semasa kepada gaya css yang ditentukan Contohnya: jika ketinggian semasa elemen div ialah 100px, tetapkan sifat ketinggian CSSnya kepada 200px, animate() akan melaksanakan animasi div ketinggian secara beransur-ansur meningkat daripada 100px kepada 200px)

jQuery.fn.delay(duration [, queueName]) (Melengahkan pelaksanaan item seterusnya dalam baris gilir. delay() boleh menangguhkan animasi seterusnya menunggu untuk dilaksanakan dalam baris gilir untuk masa yang ditentukan sebelum melaksanakannya. Ia biasanya digunakan dalam baris gilir antara dua fungsi kesan jQuery, dengan itu menangguhkan masa pelaksanaan kesan animasi seterusnya selepas kesan animasi sebelumnya dilaksanakan Jika item seterusnya bukan animasi kesan, ia tidak akan ditambahkan pada baris gilir kesan. jadi fungsi ini tidak akan membuat panggilan tertunda kepadanya)

jQuery.fn.stop([ queueName ] [, clearQueue [, jumpToEnd ] ]) (Arrêtez l'animation en cours d'exécution sur l'élément correspondant. Par défaut, la fonction stop() arrêtera uniquement l'animation en cours d'exécution. Si vous utilisez la fonction animate() pour définir trois animations A, B et C pour l'élément actuel. Si l'animation en cours d'exécution est A, elle arrêtera uniquement l'exécution de l'animation A et n'empêchera pas l'exécution des animations B et C. Bien sûr, vous pouvez également arrêter toutes les animations en spécifiant des paramètres d'option facultatifs. L'arrêt de l'animation ne restaure pas l'état avant l'exécution de l'animation, mais l'arrête directement. L'état d'exécution actuel de l'animation restera dans cet état. une animation de transition de 100px à 200px pour la hauteur d'un élément. Si l'animation est arrêtée lorsque la hauteur est de 150px, la hauteur actuelle restera toujours à 150px. Si l'animation définit une fonction de rappel après l'exécution, la fonction de rappel ne sera pas exécutée. . )

jQuery.fn.finish([ queueName ]) (termine immédiatement toutes les animations de la file d'attente. finish() arrête l'animation en cours d'exécution, supprime toutes les animations de la file d'attente et termine toutes les animations des éléments correspondants)

jQuery.fn. fadeTo([speed,]opacity[,callback]) (modifie progressivement l'opacité de l'élément sélectionné à la valeur spécifiée)

jQuery.fx.off (Cette propriété est utilisée pour définir ou renvoyer si toutes les animations sont globalement désactivées. Si cette propriété n'est pas définie, une valeur booléenne indiquant si les effets d'animation sont globalement désactivés est renvoyée. Si cette propriété est définie sur true pour désactiver toutes les animations globalement. Toutes les files d'attente d'animation qui ne sont pas encore exécutées seront terminées immédiatement sans effets d'animation false, activeront l'effet d'animation globalement
.

Vous pouvez désactiver les effets d'animation lorsque vous rencontrez les situations suivantes : vous utilisez jQuery sur un ordinateur avec une faible configuration ; certains utilisateurs peuvent rencontrer des problèmes d'accessibilité en raison des effets d'animation. )

jQuery.fx.interval (Cette propriété est utilisée pour définir ou renvoyer la fréquence d'images de l'animation (valeur en millisecondes). La propriété jQuery.fx.interval est utilisée pour définir le nombre de millisecondes pendant lesquelles l'animation jQuery dessine une image. (déclenchant un changement de style, le navigateur peut redessiner la page actuelle.) Plus la valeur est petite, plus l'animation est déclenchée et l'effet d'animation est plus évident et plus fluide. Bien sûr, la file d'attente d'animation est exécutée lors du changement de valeur de. cette propriété consommera plus de performances ne sera pas affectée. Toute file d'attente d'animation qui n'a pas encore été exécutée dessinera des effets d'animation à la fréquence d'images modifiée)

Le contenu ci-dessus exclut le traitement d'animation de la série d'analyses de code source Jquery 1.9.1 (quinzième) introduit par l'éditeur de Script House Traitement d'animation de la série d'analyses de code source jQuery 1.9.1 (quinzième). , cliquez pour en savoir plus.