Jquery1.9.1 Source Analysis Series (15) Animation processing _jquery

A. Animation compatible tween.prophooks

Tween.prophooks provides methods for setting and obtaining CSS eigenvalues in special cases, structured as follows

Tween.prophooks = {
  _default: {
    get:function () {...},
    set:function () {...}}
  ,
  scrolltop: {
    Set:function () {...}}
  ScrollLeft: {
    set:function () {...}}
  }

Tween.propHooks.scrollTop and Tween.propHooks.scrollLeft two are mainly in the IE8 offline state will appear chaos and the CSS feature values to the node

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

The Tween.prophooks._default get method attempts to obtain the Tween.prop feature value of the CSS directly from the node, if not, using Jquery.css (). In this method, a simple value such as "10px" is resolved to a floating-point number; a complex value, such as "Rotate (1rad)", returns as-is. The return results are processed again: empty strings, null, undefined and "auto" are converted to 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];
  }
  Passing an empty string as the third parameter. CSS will automatically attempt to parsefloat,
  //and return to a string if parsing fails.
  //Therefore, simple values, such as "10px", are resolved as floating-point numbers. Complex values, such as "Rotate (1rad)", return as-is. Result
  = Jquery.css (Tween.elem, Tween.prop, "");
  Empty string, null, undefined and "auto" are all converted to 0 return
  !result | |-result = = = "Auto"? 0:result;

   

The Tween.prophooks._default set method first attempts jquery.fx.step[Tween.prop] to set backward compatibility Otherwise, the CSS eigenvalues are set using Jquery.style, and in extreme cases, the eigenvalues are stored directly on the node

Set:function (Tween) {
  //Use the Step hook backward compatibility-use Csshook if he exists-use. Style if available
  //use direct eigenvalue if available
  (jquery.f x.step[Tween.prop]) {
    jquery.fx.step[Tween.prop] (tween);
  } else if (Tween.elem.style && (tween.el em.style[jquery.cssprops[Tween.prop]]!= NULL | | jquery.csshooks[Tween.prop])) {
    Jquery.style (Tween.elem, Tween.prop, Tween.now + tween.unit);
  } else {
    t ween.elem[Tween.prop] = Tween.now;
  }

B. Animation-specific objects Jquery.fx

Jquery.fx encapsulates a number of functions used to perform animation actions, which are structured as follows

jquery.fx = {
  tick = functions () {...},//the function shell that is executed at every point in time, takes out functions in Jquery.timers to execute
  timer = function (timer) {...},// Executes the function in the parameter and starts the timing
  interval = 13,//Timer step
  start = function () {...},//start timer
  stop = function () {...},//stop timing
  Spee ds = {slow:600,fast:200,_default:400},//animation speed (full animation execution time) Step
  = {}//Backward-compatible <1.8 extension point

Detailed source analysis is as follows

jquery.fx = Tween.prototype.init;
  The function shell that is executed at each point in time will take out the function in Jquery.timers to execute JQuery.fx.tick = functions () {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.splic
    E (I--, 1);
  } if (!timers.length) {jQuery.fx.stop ();
} fxnow = undefined;
}; Executes the function in the parameter and starts the timing JQuery.fx.timer = function (timer) {if (timer () && JQuery.timers.push (timer)) {JQuery
  . Fx.start ();
}
};
Timing step jQuery.fx.interval = 13; 
  Start Timer JQuery.fx.start = function () {if (!timerid) {Timerid = SetInterval (JQuery.fx.tick, jQuery.fx.interval);
}
};
  Stop Timer 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 <1.8 extension point jQuery.fx.step = {};The key source of animation here is//Animation entry function Animation (Elem, properties, Options) {... jQuery.fx.timer (jquery.extend tick,
　　{Elem:elem, anim:animation, queue:animation.opts.queue})
　　);
...
} Executes the function in the parameter and starts the timing JQuery.fx.timer = function (timer) {if (timer () && JQuery.timers.push (timer)) {JQuery
  . Fx.start ();
}
};
Timing step jQuery.fx.interval = 13; 
  Start Timer JQuery.fx.start = function () {if (!timerid) {Timerid = SetInterval (JQuery.fx.tick, jQuery.fx.interval);  }
};

Variable jquery.timers = []; is used to save a list of functions that need to be executed every tick. In general there is only one function, the tick function defined in the animation function. JQuery.fx.interval can be used to set the time interval between animations for every two frames, and the default is 13 milliseconds.

The analysis of the animation is here. The following is a list of animation-related APIs

JQuery.fn.show ([duration] [, easing] [, complete] | options) (displays all matching elements.) In addition, you can specify the transition animation effect that the element displays. If the element itself is visible, do not make any changes to it. If the element is hidden, make it visible. Relative to this function is the hide () function, which hides all matching elements.

JQuery.fn.hide ([duration] [, easing] [, complete] | options) (hides all matching elements.) In addition, you can specify the transition animation effect that the element hides. If the element itself is not visible, no changes are made to it. If the element is visible, it is hidden. ）

JQuery.fn.toggle ([duration] [, easing] [, complete] | options) (Toggle all matching elements.) In addition, you can specify the transition animation effect of the element toggle. The so-called "toggle", that is, if the element is currently visible, hide it, and make it appear (visible) if the element is currently hidden. ）

The toggle () function described here is used to toggle the display/hide of elements. jquery also has an event function toggle () with the same name, which binds the click event and shifts the execution of the different event handlers on the trigger.

JQuery.fn.slideDown ([duration] [, easing] [, complete] | options) (displays all matching elements with a sliding-down transition animation effect.) The animation effect of sliding down, where the height of the visible area of the element increases from 0 to its original height (gradually expanding downward). If the element itself is visible, do not make any changes to it. If the element is hidden, make it visible.

Relative to this function is the slideup () function, which hides all matching elements with a transition animation effect that slides up.

JQuery.fn.slideUp ([duration] [, easing] [, complete] | options) (hides all matching elements with a transition animation effect that slides up. The animation 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 upwards). If the element itself is hidden, no changes are made to it. If the element is visible, hide it)

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

JQuery.fn.fadeIn ([duration] [, easing] [, complete] | options) (displays all matching elements with a gradient animation effect that fades in. Fade in animation effect, that is, the proportion of element opacity increased from 0% to 100%. If the element itself is visible, do not make any changes to it. If the element is hidden, make it visible. Relative to this function is the fadeout () function, which hides all matching elements and has a fading transition animation effect.

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

JQuery.fn.fadeToggle ([duration] [, easing] [, complete] | options) (Toggle all matching elements with a fade in/out transition animation effect.) The so-called "toggle", that is, if the element is currently visible, hide it (fade out), and make it appear (fade in) if the element is currently hidden

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 perform a transition animation from the current style to the specified CSS style. For example, the current height of a DIV element is 100px, and setting its CSS height property to 200px,animate () will perform a transition animation that gradually increases the height of the div element from 100px to 200px.

JQuery.fn.delay (Duration [, queuename]) (deferred execution of the next item in the queue.) Delay () The next animation waiting to be performed in the queue can be deferred until the specified time. It is commonly used between two jquery effect functions in a queue to delay the execution of the next animation effect after the last animation effect has been performed. If the next item is not an effect animation, it is not added to the effect queue, so the function does not delay the call to it.

JQuery.fn.stop ([QueueName] [, Clearqueue [, Jumptoend]]) (stops the animation that is running on the current matching element.) By default, the Stop () function stops only the animation that is currently running. If you use the animate () function to set A, B, C for the current element of the 3 animation, if the currently executing animation is a, will only stop animation a execution, will not prevent the animation B and C execution. Of course, you can also stop all animations by specifying optional option parameters. Stopping an animation does not restore the state of the animation before it is performed, but it stops directly, and the current animation executes to what state it stays in. For example, a transition animation that performs an element height from 100px to 200px, stops the animation when the height is 150px, and the current height remains the status of 150px. If the animation sets a callback function after execution, the callback function is not executed. ）

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

Jquery.fn. Fadeto ([Speed,]opacity[,callback]) (The opacity of the selected element is gradually changed to the specified value)

JQuery.fx.off (this property is used to set or return whether all animations are disabled globally.) If no value is set on this property, returns a Boolean value that indicates whether the animation effect is disabled globally. If you set this property to True, all animations are disabled globally. All animation queues that are executing are not affected. Any animated queues that have not yet been executed are completed immediately when they are executed, and are no longer animated. If you set this property to False, animation effects are enabled globally.

You may want to disable the animation effect when you are experiencing the following situations: You use jquery on a computer with a lower configuration, and some users may experience accessibility problems due to animation effects. ）

JQuery.fx.interval (this property is used to set or return the frame speed (millisecond value) of the animation. The JQuery.fx.interval property is used to set the jquery animation to draw an image every few milliseconds (triggering a style change, and the browser may redraw the current page). The smaller the value, the more times the animation is triggered, the more obvious and smoother the animation, and the more performance it will be. When you change this property value, the animation queue that is executing will not be affected. Any animated queues that have not yet been executed will be animated with the changed frame speed.

The above content is the cloud Habitat Community small set to introduce the Jquery1.9.1 Source Analysis Series (15) animation processing, the JQuery 1.9.1 Source Analysis Series (15) animation processing, clicks understands the detail.