JQuery's animate Function Learning Record, jqueryanimate Function

JQuery's animate Function Learning Record, jqueryanimate Function

I was very interested in implementing jQuery animate a long time ago, but I was very busy some time ago. I didn't have time to study it until the last day of the Dragon Boat Festival holiday.

Each animation transition effect of jQuery. animate is implemented through the easing function. Two such functions are preset in jQuery1.4.2:

easing: {linear: function( p, n, firstNum, diff ) {return firstNum + diff * p;},swing: function( p, n, firstNum, diff ) {return ((-Math.cos(p*Math.PI)/2) + 0.5) * diff + firstNum;}}

It can be inferred from the parameter name that firstNum is the initial value. If you have a good knowledge in mathematics, you can find that the linear function is a linear equation. If you have a good physics, you can find that it is a displacement equation of constant speed motion (I have not learned well in mathematics and physics, and someone else reminded me of it ......). Then diff and p are the speed and time.

Let's look at the prototype of jQuery. animate:

Animate: function (prop, speed, easing, callback)

The parameters are described as follows:

Prop: a set of style attributes and their values that serve as animation attributes and end values.
Speed: Specifies the animation duration.
Easing: the name of the erased effect to be used.
Callback: The function executed when the animation is completed.

The current style value (firstNum) of the element can be obtained. The animation duration (p) is duration, and the final style value is prop. Theoretically, the animation speed (diff) can be calculated. However, this requires another function to perform operations. It is obviously unwise to do so. Let's look at the code for calling the easing function (in jQuery. fx. prototype. step ):

Var t = now ();
...
Var n = t-this. startTime;
This. state = n/this. options. duration;
...
This. pos = jQuery. easing [specialEasing | defaultEasing] (this. state, n, 0, 1, this. options. duration );

We can find that the value of p is the value of this. state, and it is known from the context that it is actually the time progress of the animation. The firstNum and diff parameter values are all written to death, respectively, 0 and 1. The secret of the easing function is completely unlocked. p, firstNum, and diff are percentages rather than actual values. The return value of the easing function is the progress of the displacement. The diff value is 1, which means the animation is run at a speed of 1 times. After calculating the displacement progress, you can use "Initial Value + (final value-Initial Value) × progress" to calculate the current displacement value:

This. now = this. start + (this. end-this. start) * this. pos );

SetInterval is used to perform a displacement operation at a certain time (13 ms in jQuery) until the difference between the current time and the initial time is greater than the animation duration. This is the execution process of jQuery. animate.

The conventional approach is to add a specific value to a value through setInterval until the value reaches the limit value. The main problem is that different browsers run at different speeds, which leads to different animation speeds. Generally, IE is slower and Firefox is faster. JQuery. animate determines the displacement value based on the current time. The displacement value at a certain time point is always fixed, so there is no difference in the animation speed.

Execution of the jquery animate () function

Use: not (: animated) to filter
$ (". Next"). click (function (){
$ ("... (Original filter): not (: animated)") ...... (executed action)
})

Example:
$ ("# Run"). click (function (){
$ ("Div: not (: animated)"). animate ({left: "+ = 20"}, 1000 );
});

How does jquery's animation callback function include parameters?

Animate (params, options)
A function used to create a custom animation.
The key to this function is to specify the animation form and result style attribute object. Each attribute in this object represents a changeable style attribute (such as "height", "top", or "opacity ").
Note: All specified attributes must be in the camel format. For example, margin-left must be replaced by marginLeft.

The value of each attribute indicates the animation ends when the style attribute is reached. If it is a value, the style property will gradually change from the current value to the specified value. If a string value such as "hide", "show", or "toggle" is used, the default animation format is called for this attribute.

In jQuery 1.2, you can use em and % units. In addition, in jQuery 1.2, you can specify "+ =" or "-=" before the attribute value to make the element do relative motion.

Return Value
JQuery

Parameters
Params (Options): a set of style attributes and their values that are used as animation attributes and final values.

Options (Options): a set of values that contain animation options.

Option
Duration (String, Number): (default value: "normal") one of the three predefined speed strings ("slow", "normal", or "fast ") or a millisecond value (for example, 1000) indicating the animation duration)

Easing (String): (default value: "swing") Name of the erased effect to be used (supported by plug-ins). By default, jQuery provides "linear" and "swing ".

Complete (Function): The Function executed when the animation is completed.

Step (Callback): Template: APICallback

Queue (Boolean): (default value: true) If set to false, this animation will not enter the animation queue (added in jQuery 1.2)

Example
After the first button is pressed, the animation that is not in the queue is displayed. When the div is expanded to 90%, the font is also added. Once the font is changed, the border animation starts.

After the second button is pressed, It is a traditional chained animation. That is, after the previous animation is completed, the next animation starts.

HTML code:

<Button id = "go1">» Animate Block1 </button>
<Button id = "go2">» Animate Block2 </button>
<Div id = "block1"> Block1 </div> <div id = "block2"> Block2 </div>
JQuery code:

$ ("# Go1"). click (function (){
$ ("# Block1"). animate ({width: "90%" },{ queue: false, duration: 5000 })
. Animate ({fontSize: '10em '}, 1000)
. Animate ({bor ...... remaining full text>