Detailed analysis of the basic animation methods in jquery _jquery

General Introduction

With the basic animation method in jquery, it is easy to add a wonderful visual effect to the Web page, giving the user a new experience

The animation in jquery

Show () and Hide () methods

1. The show () method and the Hide () method are the most basic methods in jquery, and the Hide () method sets the display of an element to "none";

2. The show () method and the Hide () method change the width, height, and transparency of the element at the same time

3. When an element uses the Hide () method, the original display property is recorded, and when the show () method is invoked, the element is displayed according to the display property value remembered by the Hide () method.

4, Show () method and Hide () method can accept a parameter, indicating the speed of movement

$ ('. Div1 '). Toggle (function () {
$ ('. Div2 '). Hide (n);
 },function () {
  $ ('. Div2 '). Show (+);
 });

FadeIn () method and Fadeout () method

1. The fadeout () method only lowers the opacity of the element for a specified period of time, while the Fadein () method reverses

2. Accept a parameter

 $ ('. Div1 '). Toggle (function () {
  $ ('. Div2 '). FadeIn (+);
 },function () {
  $ ('. Div2 '). fadeout (+);
 });

Slideup () method and Slidedown () method

1, the Slideup () method and the Slidedown () method only change the height of the element. If the display property value of an element is "none", the element will extend from top to bottom when the Slidedown () method is invoked, and the Slideup () method is the opposite

2. Accept a parameter

 $ ('. Div1 '). Toggle (function () {
  $ (this). Next (). Slideup (),
 },function () {
  $ (this). Next (). Slidedown ();
 });

Custom Animation method Animate ()

Grammar: Animate (Params,speed,callback);

(1) Params: A containing style attribute and worth mapping

(2) Speed: Speed parameter, optional

(3) Callback: Functions that are executed when the animation completes, optional

1. Basic usage

 $ ('. Div1 '). Click (function () {
  $ ('. Div2 '). Animate ({width: ' +=50px ', Height: ' 300px '},600);
 });

2, multiple animation

If you want to use chain-type motion can be used in the chain

 $ ('. Div1 '). Click (function () {
 $ ('. Div2 '). Animate ({width: ' 350px '},600)
  . Animate ({height: ' 300px '},600);
 });

Note: if the CSS () method is used in chained notation, the CSS () method will not be added to the motion queue and will be executed directly without waiting for the previous animation

 $ ('. Div1 '). Click (function () {
  $ ('. Div2 '). Animate ({width: ' 350px '},600).
   Animate ({height: ' 300px '},600)
   . CSS (' border ', ' 10px solid black ');
 });

The border of this element is added to the element at the outset, and the solution to this problem is to use the callback function

If you want to move at the same time, you can write the values that are moving together

 $ ('. Div1 '). Click (function () {
 $ ('. Div2 '). Animate ({width: ' 350px ', Height: ' 300px '},600);
 });

callback function

The callback function applies to all of the jquery animation effects method

For example, to solve a problem in which the CSS () attribute of the chained style can be executed directly, a callback function method is used

 $ ('. Div1 '). Click (function () {
 $ ('. Div2 '). Animate ({width: ' 350px '},600).
   Animate ({height: ' 300px '},600, function () {
   $ ('. Div2 '). CSS (' border ', ' 10px solid black ');
  });
 

Stop animation and judge whether it is animated

1, stop the animation of elements

The Stop () method accepts two parameters

The first argument is true, or false, to indicate whether you want to empty an animated queue that is finished, such as when we write a chain animation, if the first argument is true, and when we block an animated action that is in progress, the subsequent animation is emptied, and if the argument is false, will only prevent the current animation, animation queue after the animation is still performed

The second argument is true or FALSE, indicating whether you want to jump to the end state of an animation that is being performed

2, determine whether the element is in the animation state

If the user frequently executes a animate () animation, there will be animation accumulation, the solution is to determine whether the element is in the animation state, if the element is not animated, to add a new animation for the element

if (!$ (' Div1 '). Is (': Animated ')) {
 //Add animation
 }

3. Delay Animation

If you want to delay the execution of an animation, you can use the delay () method

 $ ('. Div1 '). Click (function () {
  $ ('. Div2 '). Animate ({width: ' 350px '},600). Delay (
   1000)
   . Animate ({height : ' 300px '},600,function () {
    $ ('. Div2 '). CSS (' border ', ' 10px solid black ');
   });
 

Other animation methods

1, Slidetoggle () method

Toggle the visibility of matching elements by changing the height

$ ('. Div1 '). Click (function () {
 $ ('. Div2 '). Slidetoggle ();
});

2, Fadeto () method

The opacity of an element can be adjusted incrementally to a specified value, which only adjusts the opacity of the element

 $ ('. Div1 '). Click (function () {
 $ ('. Div2 '). Fadeto (600,0.5);
 });

3, Fadetoggle () method

Toggle the visibility of matching elements through opacity

 $ ('. Div1 '). Click (function () {
 $ ('. Div2 '). Fadeto (600,0.5);
 });

Above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!