Jquery1.9.1 source code analysis series animation processing extra chapter-JS Tutorial-php.cn

This article mainly introduces the relevant information of Jquery1.9.1 Source Code Analysis Series (Fifteen) Animation Processing. Friends who need it can refer to it

a. Animation compatible with Tween.propHooks

Tween.propHooks provides methods for setting and obtaining css feature values under special circumstances. The structure is as follows

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

Copy after login

Tween.propHooks.scrollTop and Tween.propHooks.scrollLeft are mainly caused by confusion when ie8 is offline and the css feature value is saved to the node

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

Copy after login

The get method of Tween.propHooks._default will try to obtain the tween.prop feature value of css directly from the node. If it cannot be obtained, use jQuery.css() method to obtain it. . During this method processing, simple values such as "10px" will be parsed as floating point numbers; complex values such as "rotation (1rad)" will be returned as they are. And then process the returned results: empty string, null, undefined and "auto" are converted to 0; other conditions remain unchanged.

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

Copy after login

The set method of Tween.propHooks._default will first try jQuery.fx.step[ tween.prop ] to set backward compatibility; otherwise, jQuery.style will be used. Set the css characteristic value; in the most extreme case, the characteristic value will be saved directly on the node

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

Copy after login

b. Animation special object jQuery.fx

jQuery.fx encapsulates some functions used to perform animation actions. The structure is as follows

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

Copy after login

Detailed The source code analysis is as follows

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

Copy after login

The variable jQuery.timers = []; is used to save the list of functions that need to be executed for each tick. Generally speaking, there is only one function, which is the tick function defined in the Animation function. jQuery.fx.interval can be used to set the time interval between every two frames of the animation. The default is 13 milliseconds.

That’s it for the animation analysis. Let’s list the animation-related APIs

jQuery.fn.show([ duration ] [, easing ] [, complete ] | options ) (displays all matching elements. In addition, you can also specify The transition animation effect of the element display. If the element itself is visible, no changes will be made to it. The opposite of this function is the hide() function, which is used to hide all matching elements. )

jQuery.fn.hide([ duration ] [, easing ] [, complete ] | options) (Hide all matching elements. In addition, you can also specify the transition animation effect for element hiding. If the element itself is invisible, no changes are made to it. If the element is visible, it is hidden)

##jQuery.fn.toggle([ duration ] [, easing ] [ . , complete ] | options) (switch all matching elements. In addition, you can also specify the transition animation effect of element switching. The so-called "switch" means that if the element is currently visible, it will be hidden; if the element is currently hidden , it will be displayed (visible).)

The toggle() function introduced here is used to switch the display/hide of the element. jQuery also has an event function of the same name, toggle(), which is used to bind the click event and switch to execute different

event processing functions in turn when triggered.

jQuery.fn.slideDown([ duration ] [, easing ] [, complete ] | options) (Displays all matching elements with a sliding-down transition animation effect. Slide-down animation effect , that is, the height of the element's visible area gradually increases from 0 to its original height (gradually expanding downward). If the element itself is visible, no changes are made to it. If the element is hidden, make it visible.

##The opposite of this function is the slideUp() function, which is used to hide all matching elements and has an upward sliding transition animation effect)

jQuery.fn. slideUp([ duration ] [, easing ] [, complete ] | options) (hide all matching elements with an upward sliding transition animation effect. The upward sliding animation effect means that the height of the visible area of the element gradually changes from the original height Decreases to 0 (collapses upward). If the element itself is hidden, no changes are made to it. If the element is visible, it is hidden)

jQuery.fn.slideToggle. ([ duration ] [, easing ] [, complete ] | options) (toggle all matching elements with a sliding transition animation effect. The so-called "toggle" means that if the element is currently visible, hide it ( Slide up); if the element is currently hidden, make it visible (slide down))

jQuery.fn.fadeIn([ duration ] [, easing ] [, complete ] | options) (Displays all matching elements with a fade-in transition animation effect. The fade-in animation effect, that is, the proportion of the element's opacity gradually increases from 0% to 100%. If the element itself is visible, no changes are made to it. . If the element is hidden, make it visible. The opposite of this function is the fadeOut() function, which is used to hide all matching elements with a fade-out transition animation effect)

jQuery.fn.fadeOut([ duration ] [, easing ] [, complete ] | options) (hide all matching elements with a fade-out transition animation effect. The so-called "fade out" animation effect is the element's The opacity scale gradually decreases from 100% to 0%. If the element itself is hidden, no changes are made to it. If the element is visible, it is hidden)

##jQuery. fn.fadeToggle([ duration ] [, easing ] [, complete ] | options) (toggle all matching elements with a fade-in/fade-out transition animation effect. The so-called "toggle" means that if the element is currently visible, then Hide it (fade out); if the element is currently hidden, make it show (fade in))

jQuery.fn.animate(cssProperties [, duration ] [, easing ] [, complete ] | cssProperties, options) (performs a custom animation based on css

properties. You can set css styles for matching elements, and the animate() function will execute a custom animation from the current style to the specified css style. Transition animation. For example: the current height of a p element is 100px, and its CSS height property is set to 200px. animate() will perform a transition animation that gradually increases the height of the p element from 100px to 200px)

jQuery.fn.delay(duration [, queueName ]) (Delay the execution of the next item in the queue. delay() can delay the next animation waiting to be executed in the queue for a specified time before execution. It is commonly used Between two jQuery effect functions in the queue, thereby delaying the execution time of the next animation effect after the previous animation effect is executed. If the next item is not an effect animation, it will not be added to the effect queue, so this function It will not be called lazily)

jQuery.fn.stop([ queueName ] [, clearQueue [, jumpToEnd ] ]) (Stops the animation running on the currently matched element. By default, The stop() function will only stop the currently running animation. If you use the animate() function to set three animations A, B, and C for the current element, if the currently executing animation is A, it will only stop animation A. will not prevent the execution of animations B and C. Of course, you can also stop all animations by specifying optional option parameters. Stopping the animation does not restore the state before the animation was executed, but stops it directly. The animation will stay in whatever state it is currently in. For example: execute a transition animation with the height of an element from 100px to 200px, and stop the animation when the height is 150px, then the current height will still remain at 150px. If the animation sets a

callback function after execution is completed, the callback function will not be executed. )

jQuery.fn.finish([ queueName ]) (Immediately complete all animations in the queue. finish() will stop the currently running animation, delete all animations in the queue, and complete the matching All animations of elements)

jQuery.fn. fadeTo([speed,]opacity[,callback]) (gradually changes the opacity of the selected element to the specified value)

jQuery.fx.off (This property is used to set or return whether all animations are globally disabled. If you do not set a value for this property, a Boolean value indicating whether the animation effects are globally disabled is returned. If Setting this property to true will globally disable all animation queues. Any animation queues that have not yet been executed will be completed immediately and will no longer have animation effects. Set to false to enable animation effects globally

You can disable animation effects when you encounter the following situations: you are using jQuery on a computer with low configuration; some users may. Accessibility issues encountered due to animation effects)

jQuery.fx.interval (This property is used to set or return the frame rate of the animation (in milliseconds). The jQuery.fx.interval property is used It is used to set how many milliseconds every jQuery animation draws a frame of image (when a style change is triggered, the browser may redraw the current page). The smaller the value, the more times the animation is triggered, and the animation effect is more obvious and smoother. Of course, it will also consume more performance. When changing the value of this property, the animation queue being executed will not be affected. Any animation queue that has not yet been executed will draw the animation effect at the changed frame rate)

The above content is the animation processing of jQuery 1.9.1 source code analysis series (fifteen) introduced to you by the editor of Script House. Click to learn more.

The above is the detailed content of Jquery1.9.1 source code analysis series animation processing extra chapter. For more information, please follow other related articles on the PHP Chinese website!