Deep analysis of the animate () function in jquery

Definition and Usage:

The animate () method performs a custom animation of the CSS property set.
This method changes the element from one state to another through a CSS style. CSS property values are gradually changed, so you can create animation effects.
Only numeric values can create animations (such as "margin:30px"). String values cannot create animations (such as "background-color:red").
Note: use ' + = ' or ' = ' to create a relative animation (relative animations).

Syntax One: $ (selector). Animate (Styles,speed,easing,callback)

A style value is required to specify the CSS style and values that produce animation effects.

Possible CSS style values (provides an instance): backgroundposition
BorderWidth, Borderbottomwidth,borderleftwidth,borderrightwidth,bordertopwidth,borderspacing,margin, Marginbottom,marginleft,marginright,margintop,outlinewidth,padding,paddingbottom,paddingleft,paddingright, Paddingtop,height,width,maxheight,maxwidth,minheight,minwidth,font,fontsize,bottom,left,right,top, Letterspacing,wordspacing,lineheight,textindent.

(2) Speed is optional, specify the speed of the animation, the default is "normal".
Possible values: milliseconds (such as 1500), "Slow", "normal", "fast"

(3) Easing optional, specify the easing function to set the animation speed in different animation points.
Parameter duration: Defines the animation time, the millisecond, in fact is the speed, the time is shorter, the movement speed is quicker.
Parameter easing: Specify animation effect, easing JS provides a variety of animation effects, there is uniform motion, variable acceleration movement, buffer wave effect, they are: Linear,swing,jswing,easeinquad,easeoutquad, Easeinoutquad,easeincubic, Easeoutcubic,easeinoutcubic,easeinquart,easeoutquart,easeinoutquart, EaseInQuint, Easeoutquint,easeinoutquint,easeinsine,easeoutsine, Easeinoutsine,easeinexpo,easeoutexpo,easeinoutexpo, Easeincirc, Easeoutcirc,easeinoutcirc,easeinelastic,easeoutelastic,easeinoutelastic, Easeinback,easeoutback, Easeinoutback,easeinbounce,easeoutbounce,easeinoutbounce.

(4) Callback optional. The function to execute after the animate function has finished executing.

Syntax two: $ (selector). Animate (Styles,options)

(1) Styles required. Specify the CSS style and value (IBID.) that produce the animation effect.

(2) Options Optional. Specify additional options for animations.
Possible values:
Speed-Set the speed of the animation
Easing-Specify the easing function to use
Callback-the function to be executed after the animation completes
Step-the function to be executed after each stage of the animation is completed
Queue-Boolean value. Indicates whether animations are placed in the effect queue. If False, the animation will begin immediately
Specialeasing-mappings of one or more CSS properties from the styles parameter, and their corresponding easing functions

Stop (clearqueue,jumptoend) function analysis

Just from the instructions given on the official API, we know that the first argument is for other animation queues (not including the current animation), and the second is the current animation.

So, what is an animated queue?

The so-called animation queue is a series of animations to perform, such as a box in the first second to perform a move animation, and then a second to perform a larger animation. So, this is two animations.

Another example, click a button A, to the box B to trigger the animation effect, each move 10px, 10px need to move the time is 2s, then the fast speed of this a button, you in the 2s time point 10 times, this animation needs to accumulate 10 times. Although we can only complete 1 animation effects in 2s, but the remaining 9 animation is to be completed, which formed a cumulative animation, with the queue like, if not to do any processing, will be followed by the first animation of the rules to complete.

But in reality, this kind of animation accumulation is not the result we expect. So, we need to do more of the animation. From the argument of the stop, for the operation of the animation, divided into the current animation and waiting for the animation queue, the incoming parameter is a Boolean value type.

Clearqueue, whether to clear wait animation queue, default false, that is, do not clear waiting animation queue, set to False, empty waiting animation queue.
Jumptoend, whether to complete the current animation immediately, default false, that is, to stop the current animation, set to True, to complete the current animation immediately.

Yes, the above example does validate the arguments of the stop function.

But, ni, I wrote another example, I feel the foot of my cognition has been overturned ...

Online demo, please jab jquery stop Example 3

Html:

<a href= "#" class= "btn" >hover me</a>
<div class= "Dropdown" >
<ul>
<li>lalalal1</li>
<li>lalalal3</li>
<li>lalalal2</li>
</ul>
</div>

Javascript:

<script type= "Text/javascript" src= ". /js/common/jquery.js "></script>
<script type= "Text/javascript" >
$ (function () {

var i=0,j=0;

function Gethourtime (datetime) {
var time={
Hours:datetime.getHours (),
Seconds:datetime.getSeconds (),
Miliseconds:datetime.getMilliseconds ()
}
Return time.hours+ ': ' +time.seconds+ ': ' +time.miliseconds;
}
$ ('. btn '). Hover (function () {
$ ('. Dropdown '). Stop (False,false). Slidedown (4000,function () {
i++;
Console.log (' mouseEnter: ' +i+ ', Time is: ' +gethourtime (New Date ());
});
},function () {
$ ('. Dropdown '). Stop (False,false). Slideup (4000,function () {
j + +;
Console.log (' mouseout ... ' +j+ '), Time is: ' +gethourtime (New Date ());
});
});
});
</script>

Animate question One

Animate the callback function is executed immediately

will be executed at the beginning of the animate, for unknown reasons.

$ ("#chat_frame"). Animate ({height: "32px", Width: "102px"}, "Fast", minimizefinish (self));

function Minimizefinish (self) {
Self._chat_frame_min = 1;
Window.alert ("minimized");
}

Change it to purple, threw.

$ ("#chat_frame"). Animate ({height: "32px", Width: "102px"}, "Fast", function () {
Self._chat_frame_min = 1;
});

Question Two

Don't support backgroundposition?

Many of the animate attributes have a list of control CSS backgroundposition (Dom) attributes, and W3school provides an instance that works properly, including FF. But the actual use encountered many problems, according to Animate () syntax, in all browsers are invalid, DOM elements to switch to backgroundPositionX and backgroundPositionY, WebKit under the support, But FF and opera again. Headache.... Then looked for more information, generally said animate () backgroundposition support is not good, need to add a small plug-in support backgroundposition

Solutions

Xx.stop (). Animate ({backgroundpositionx:300px,backgroundpositiony:200px})

or use

Animatebackground-plugin.js plugin (own Baidu name)