Front-end Programming Improvement Tour (16) ———— animations in jquery

The previous article summarizes the events in jquery, which summarizes and classifies the animations in jquery. There are many page interactions and animations that are very popular in recent sharing, and are very much in line with the mobile experience. Seemingly fancy animations are inherently out of the ordinary way to write animations. Yue Timor has made a simple collation of the jquery animated part of the content.

Such as:

As shown, these lowest-level animation methods are used from the implementation, regardless of the complexity of the animation. This article will start with an animated method and a method related to the animation state.

first, the animation method

1. Change the method of high, wide and opacity at the same time

This involves the show and hide methods, the result of the animation is to set the element style display property is None, but since the animation, it is necessary to take care of the middle state. Here the animation method parameters can set the duration and execution of the callback method. Then you can set a relatively large time to see how the Show method and hide method animation in the execution of the transition.

Typical usage is the following example:

HTML structure:

<div id= "Panel" >

jquery Code:
$ ("#panel h5.head"). Click (function () {    if ($ (). Next (). Is (': Visible ')) {            $ (this). Next (). Hide (10000);    else{    $ (this). Next (). Show (10000);    }     })

since setting the animation time is long, it is obvious that the three sets of values of width, height and transparency in the process of animation have a different process. 
2. Ways to change element opacity only
Here is a set of methods Fadein method and Fadeout method, as the name implies, fade in and fade out effect, mainly by changing the transparency of the element implementation. The above example is still continued, and the methods of judging statements are changed into Fadein and fadeout methods.
$ ("#panel h5.head"). Click (function () {    if ($ (). Next (). Is (': Visible ')) {            $ (this). Next (). FadeOut (10000);    else{    $ (this). Next (). FadeIn (10000);    }     )

by observing the changes in the chrome console element style, you will find that the transparency is changing rapidly and the final state is display none or block. 

3. Methods to change the height of the element only
The Slideup method and the Slidedown method, which are implemented by changing the height of an element during animation execution. Continue with the previous example and only modify the method.
$ ("#panel h5.head"). Click (function () {    if ($ (). Next (). Is (': Visible ')) {            $ (this). Next (). Slideup (10000);    else{    $ (this). Next (). Slidedown (10000);    }     )

by observing in the browser console, it is easy to verify that this group of methods does change the height of the element to transition the animation, but Yue Timor also found that the upper and lower padding also have a reduced process. 
4. Custom animations
The difference between the Animate method and the above three groups of methods is that the above three groups of methods are out of the way with the Animate method, the animate method is the common method of animation. The Animate method can have three parameters, the first parameter is the end value of the style to be changed for the animation, the second argument is the animation execution time, and the third is the callback that the animation executes. 
It is not difficult to see that the three groups of methods differ from the Animate method only in that three sets of method animation execution to change the style end value form has been defined, and animate still needs to be specified. This seemingly troublesome designation also gives us a great deal of freedom to animate.

 Here The Custom animation can also set the cumulative/decrement method: 
$ (this). Animate ({width: "-=50px"}, 3000,function () {Console.log ("animation was Done")});  

5. Multiple animations
Multi-animation is only in the above four groups of methods based on the business of the arrangement of the composition.
6. State Toggle Animation
There are three methods mentioned in mind Mapping: Toggle method, Slidetoggle method and Fadetoggle method. There are three ways to toggle visibility. The Fadeto method is to set the transparency.
Take Slidetoggle use as an example:
$ (this). Next (). Slidetoggle ();

 second, the animation state-related methods
1. How to determine the state of an animation
There is no independent method, but it is judged by the IS method.
$ (' #mover '). Is (": animated")

2. Delay Animation
The method for implementing the animation delay is the delay method, and the time when the parameter is passed in.
Typical usage:
$ (this). Animate ({left: "400px", Height: "200px", Opacity: "1"}, (+).). Animate ({top: "200px", Width: "200px" }, (FadeOut). Delay ("slow");

3. Stop the animation
The Stop method is used to stop the animation and can pass in two Boolean values to make the argument. The  first parameter indicates whether you want to empty the animation queue that is not executed, and the second parameter represents whether the currently executing animation jumps directly to the end state. 
Common scenarios when the cursor moves in and out, the animation is not finished, so you can stop the animation and perform the animation that you added at this point:
<pre name= "Code" class= "JavaScript" >$ ("#panel"). Hover (function () {  $ (this). Stop (). Animate ({height: "150" , Width: "+"},  ($);},function () {  $ (this). Stop (). Animate ({height: "", Width: ""}, "});  



Front-end Programming Improvement Tour (16) ———— animations in jquery