Jquery1.9.1 other than the source code analysis series (15th) animation processing-jquery-js tutorial

This article mainly introduces other related documents of the Jquery1.9.1 source code analysis series (15th) animation processing. For more information, see A. animation compatibility with Tween. propHooks

Tween. propHooks provides methods to set and obtain css feature values in special cases. The structure is as follows:

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

Tween. propHooks. scrollTop and Tween. propHooks. scrollLeft are mainly confused in ie8 Offline state, 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;  }} 

Obtain the signature () method. In this method, a simple value such as "10px" will be parsed as a floating point number; a complex value such as "rotation (1rad)" will return the original value. And then process the returned results: Empty strings, null, undefined, and "auto" are all converted to 0; other situations 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];} // pass an empty string to the .css of the third vertex. // parseFloat will be automatically attempted, // and a string will be returned if the parsing fails. // Therefore, a simple value, such as "10px", will be parsed as a floating point number. Complex values, such as "rotate (1rad)", return the original value. Result = jQuery.css (tween. elem, tween. prop, ""); // empty string, null, undefined, and "auto" are converted to 0 return! Result | result = "auto "? 0: result ;}

Tween. propHooks. the _ default set method will first try jQuery. fx. step [tween. prop] To set downward compatibility; otherwise, jQuery is used. style to set the css feature value. In the most extreme case, the feature value is saved directly on the node.

Set: function (tween) {// use step hook for downward compatibility-use cssHook if it exists-use. if style is available, // use the direct feature value. if it is available, if (jQuery. fx. step [tween. prop]) {jQuery. fx. step [tween. prop] (tween);} else if (tween. elem. style & (tween. elem. style [jQuery.css Props [tween. prop]! = Null | jQuery.css Hooks [tween. prop]) {jQuery. style (tween. elem, tween. prop, tween. now + tween. unit);} else {tween. elem [tween. prop] = tween. now ;}}

B. Special animation object jQuery. fx

JQuery. fx encapsulates some functions used to execute animation actions. The structure is as follows:

JQuery. fx = {tick = function (){...}, // The function shell that will be executed at each time point will retrieve jQuery. timer = function (timer ){...}, // execute the function in the parameter and start the timer interval = 13, // The timing step start = function (){...}, // start the timer stop = function (){...}, // stop timing speeds = {slow: 600, fast: 200, _ default: 400}, // animation speed (full animation execution time) step ={}// backward compatible with <1.8 extension points}

Detailed source code analysis is as follows:

JQuery. fx = Tween. prototype. init; // The function shell that will be executed at each time point, and jQuery will be taken out. the function in timers executes 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 ;}; // execute the function in the parameter and start the timer jQuery. fx. timer = function (timer) {if (timer () & jQuery. timers. push (timer) {jQuery. fx. start () ;}}; // timing step jQuery. fx. interval = 13; // start the timer jQuery. fx. start = function () {if (! TimerId) {timerId = setInterval (jQuery. fx. tick, jQuery. fx. interval) ;}}; // stop timing jQuery. fx. stop = function () {clearInterval (timerId); timerId = null ;}; // animation speed (full animation execution time) jQuery. fx. speeds = {slow: 600, fast: 200, // Default speed _ default: 400}; // backward compatible with <1.8 extension point jQuery. fx. step ={}; the key source code for executing the Animation is // Animation entry function Animation (elem, properties, options ){... jQuery. fx. timer (jQuery. extend (tick, {elem: Elem, anim: animation, queue: animation. opts. queue }));...} // execute the function in the parameter and start the timer jQuery. fx. timer = function (timer) {if (timer () & jQuery. timers. push (timer) {jQuery. fx. start () ;}}; // timing step jQuery. fx. interval = 13; // start the timer jQuery. fx. start = function () {if (! TimerId) {timerId = setInterval (jQuery. fx. tick, jQuery. fx. interval );}};

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

The animation analysis is here. The following describes the animation-related APIs.

JQuery. fn. show ([duration] [, easing] [, complete] | options) (displays all matching elements. In addition, you can specify the transition animation effect displayed by the element. If the element itself is visible, no changes will be made to it. If the element is hidden, it is visible. The hide () function is used to hide all matching elements)

JQuery. fn. hide ([duration] [, easing] [, complete] | options) (hides all matching elements. You can also specify the transition animation effect hidden by the element. If the element itself is invisible, no changes will be made to it. If the element is visible, hide it .)

JQuery. fn. toggle ([duration] [, easing] [, complete] | options) (switches all matching elements. You can also specify the transition animation effect for Element Switching. The so-called "Switch" means to hide an element if it is visible. If the element is hidden, it is displayed (visible ).)

The toggle () function described here is used to switch between display and hide elements. JQuery also has an event function toggle () with the same name, which is used to bind a click event and perform different event processing functions during streaming switching.

JQuery. fn. slideDown ([duration] [, easing] [, complete] | options) (displays all matching elements with a downward slide transition animation effect. Sliding down the animation effect, that is, the height of the visible area of the element increases from 0 to its original height (expanding down ). If the element itself is visible, no changes will be made to it. If the element is hidden, it is visible.

This function is opposite to the slideUp () function, which is used to hide all matching elements and has a transitional animation effect that slides upwards)

JQuery. fn. slideUp ([duration] [, easing] [, complete] | options) (hides all matching elements and has a transitional animation effect that slides upwards. The Animated Effect of sliding up, that is, the height of the visible area of the element is gradually reduced from the original height to 0 (gradually collapsed up ). If the element itself is hidden, no changes will be made to it. Hide an element if it is visible)

JQuery. fn. slideToggle ([duration] [, easing] [, complete] | options) (switches all matching elements and has a sliding transition animation effect. The so-called "Switch" means that if an element is currently visible, it is hidden (sliding up); If the element is currently hidden, it is displayed (sliding down ))

JQuery. fn. fadeIn ([duration] [, easing] [, complete] | options) (displays all matching elements with a light transition animation effect. Fades in the animation effect, that is, the opacity ratio of the element increases from 0% to 100%. If the element itself is visible, no changes will be made to it. If the element is hidden, it is visible. Opposite to this function, the fadeOut () function is used to hide all matching elements and has a transitional animation effect that fades out)

JQuery. fn. fadeOut ([duration] [, easing] [, complete] | options) (hides all matching elements and has a fade-out animated transition effect. The so-called "Fade Out" animation effect, that is, the opacity ratio of the element gradually decreases from 100% to 0%. If the element itself is hidden, no changes will be made to it. Hide an element if it is visible)

JQuery. fn. fadeToggle ([duration] [, easing] [, complete] | options) (switches all matching elements and has a transition animation effect of fade in/out. The so-called "Switch" means that if an element is currently visible, it will be hidden (fade out); If the element is currently hidden, it will be shown (fade in ))

JQuery. fn. animate (cssProperties [, duration] [, easing] [, complete] | cssProperties, options) (executes a Custom Animation Based on css attributes. You can set a css style for the matching element. The animate () function will execute a transition animation from the current style to the specified css style. For example, if the current height of a p element is PX, set its CSS height attribute to 200px and animate () an animation will be executed to gradually increase the height of the p element from 100px to 200px)

JQuery. fn. delay (duration [, queueName]) (delays the execution of the next item in the queue. Delay () can be used to delay the next animation waiting for execution in the queue after a specified time. It is often used between two jQuery effect functions in the queue, thus 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 the function will not call it late)

JQuery. fn. stop ([queueName] [, clearQueue [, jumpToEnd]) (stop the animation running on the current matching element. By default, the stop () function only stops the currently running animation. If you use the animate () function to set the three animations A, B, and C for the current element, if the animation currently being executed is A, it will only stop executing animation, the execution of animation B and animation C is not blocked. Of course, you can also stop all animations by specifying Optional options. Stopping an animation does not recover to the State before the animation is executed. Instead, the animation is stopped directly. For example, if you execute a transition animation with an element height from 100px to 200px and the animation is stopped when the height is 150px, the current height remains 150px. If the callback function is set after the animation is executed, the callback function is not executed .)

JQuery. fn. finish ([queueName]) (complete all animations in the queue immediately. Finish () stops the currently running animation, deletes the animation in all queues, and completes all animations matching the element)

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

JQuery. fx. off (this property is used to set or return whether all animations are globally disabled. If this attribute is not set, a Boolean value indicating whether the animation effect is globally disabled is returned. If this attribute is set to true, all animations are globally disabled. All ongoing animation queues are not affected. Any animation queue that has not been executed will be completed immediately at execution without any animation effect. If this attribute is set to false, the animation effect is enabled globally.

You can disable the animation effect in the following situations: You use jQuery on a low-configuration computer; some users may encounter access problems due to the animation effect .)

JQuery. fx. interval (this attribute is used to set or return the frame rate of an animation (millisecond value ). The jQuery. fx. interval attribute is used to set the number of milliseconds in which a jQuery animation draws an image (when a style change is triggered, the browser may re-draw the current page ). The smaller the value, the more triggers the animation, the more obvious and smoother the animation effect, and the more performance consumption. When this attribute value is changed, the executing animation queue is not affected. Any animation queue that has not been executed will draw the animation effect based on the modified frame speed)

The above content is an article about Jquery1.9.1 source code analysis series (15th) animation processing, jQuery 1.9.1 source code analysis series (15th) animation processing, click to learn more.