The animation of jquery Development II

1, stop the animation and determine whether it is in an animated state
(1) Stops the animation of the element.
Many times you need to use the Stop () method to stop an animation that is currently executing. The syntax for the Stop () method is as follows:

stop([clearQueue],[gotoEnd]);

Parameters Clearqueue and gotoend are optional parameters, Boolean (True or false), Clearqueue represents whether to empty an unfinished animation queue, and Gotoend represents whether the animation being executed jumps to the end state.
If you use the Stop () method directly, the animation that is currently in progress is stopped immediately, and the next animation starts in the current state if there is another animation waiting to continue.
For example, after binding a hover event for an element, the user will trigger an animation when the cursor is moved into the element, and when the animation is not finished, the user will move the cursor out of the element, then the animated effect of the cursor will be placed in the queue, waiting for the cursor to move into the animation after the end of the execution, Therefore, if the cursor moves too fast, it causes the animation to be inconsistent with the cursor's action. You can resolve this problem by adding the stop () method before the cursor moves out of the way.
The jquery sample code is as follows:

$("#panel").hover(function(){$(this).stop();.animate({"height":"200px","width":"200px"},3000);}.function(){$(this).stop();.animate({"height":"100px","width":"100px"},3000);})

If you encounter a composite animation, the sample code is as follows:

$ ( "#panel" ). Hover ( Span class= "hljs-function" >function   ()  {  $ (this ). Stop (); Animate ({:  "200px" }, 3000 ). Animate ({ "width" :  "200px" }, 3000 );}. Function () {$ (this ). Stop (); Animate ({:  "100px" }, 3000 ). Animate ({ "width" :  "100px" }, 3000 );  

At this point, only a stop with no parameters () has become inadequate. Because stop () stops only the animations that are in progress. If the animation is animating animate ({"Height": "200px"},3000) that changes height, the cursor is moved out, only the current animation is customized, and then the animated animate ({"width": "200px"},3000) that changes the width is executed. This is obviously not the expected result. In this case, the first parameter of the Stop () method works, and the first parameter (Clearqueue) can be set to true. This time the program will empty the animation queue that the current element has not yet executed, and the code above will be expected to be as follows.

$ ( "#panel" ). Hover ( Span class= "hljs-function" >function   ()  {  $ (this ). Stop (true );. Animate ({:  "200px" }, 3000 ). Animate ({ "width" :  "200px" }, 3000 );}. Function () {$ (this ). Stop (true );. Animate ({:  "100px" }, 3000 ). Animate ({ "width" :  "100px" }, 3000 );  

The 2nd parameter (gotoend) can be used to allow the animation being executed to reach the end of the state directly, usually for the latter animation to be based on the last state of the previous animation, you can stop (false,true) this way to let the current animation directly to the end state. Of course, you can also use Stop (true,true), which stops the current animation, reaches the end of the current animation, and empties the animation queue.

Note: jquery can only set the final state of the animation that is being performed, and does not provide a way to reach the final state of the animation queue without being executed directly. For example, there is a set of animations:

$("div.content").animate({"height":"200px"},3000).animate({"width":"200px"},3000).animate({"opacity":"0.2"},3000);

No matter how you set stop (), you cannot change the width of the live height when the

The end state of the element becomes the size of the 200*200, and the transparency is 0.2.

(2) Determine if the element is in an animated state
When you use animate () animations, you avoid animation accumulation and the animation is inconsistent with the behavior of the user. Animation accumulates when the user quickly performs animate () animations on an element. The workaround is to determine whether the element is animated, and if the element is not animated, to add a new animation to the element, or not to add it, the sample code is as follows:

if(!$(element).is(":animated")){//判断用户是否处于动画状态// 如果当前没有进行动画，则添加新动画}

(3) Delay animation
The sample code is as follows:

$(this).animate({"height":"200px"},3000).delay(2000).animate({"width":"200px"},3000);

The delay () method allows us to delay the execution of a function in the queue or to customize the queue.

2, other animation methods

jquery also has 4 animation methods that are designed to interact with each other.

toggle(speed,[callback])slideToggle(speed,[easing],[callback])fadeTo(speed,opacity,[callback])fadeToggle(speed,[easing],[callback])

(1) Toggle () method
The toggle () method Toggles the visible state of the element. Toggles to hidden if the element is visible, or to visible if the element is hidden.
The sample code is as follows:

$("p").click(function(){$(this).next().toggle();})

Equivalent:

$("p").toggle(function(){$(this).next().hide();}.function(){$(this).next().show();})

(2) Slidetoggle () method
The Slidetoggle () method toggles the visibility of the matched element by a height change, which only adjusts the height of the element.
The sample code is as follows:

$("p").click(function(){$(this).next().slideToggle();})

Equivalent:

$("p").toggle(function(){$(this).next().slideUp();}.function(){$(this).next().slideDown();})

(3) FadeTo () method
The FadeTo () method adjusts the opacity of an element to a specified value in a progressive manner. The opacity of the adjustment element of the animation, that is, the height and width of the matched element will not change.
The sample code is as follows:

$("p").click(function(){$(this).next(). fadeTo(3000,0.3);//3000毫秒后，透明度渐变为0.2})

(4) Fadetoggle () method
The Fadetoggle () method toggles the visibility of an element by changing the opacity of the matching element. This animation effect only adjusts the opacity of the element. The sample code is as follows:

$("p").click(function(){$(this).next().fadeToggle();})

Equivalent:

$("p").toggle(function(){$(this).next().fadeOut();}.function(){$(this).next().fadeIn();})

3, Animation method summary

Animation queue
(1) Animation queue on a set of elements
When multiple properties are applied in a animate () method, the animation occurs at the same time.
When the animation method is applied in a chained way, the animation occurs in sequence.

(2) animation effect on multiple sets of elements.
By default, animations occur at the same time.
When animation is applied in the form of callbacks, the animation occurs in the order of the callbacks.

Note:
Also in the animation method, note that the non-animated method will queue up. For example, the CSS () method requires that non-animated methods be executed sequentially, and these methods need to be written in the callback of the animation method.

The animation of jquery Development II