03-jquery animation effects

jquery provides a set of common animation effects on a Web page, these animations are standard, regular effects, but also gives us the ability to customize the animation.

Show animations

Way One:

  $ ("div"). Show ();

Explanation: No parameter means that the specified element is displayed directly. In fact, the bottom of this method is display: block; realized.

Way two:

$ (' div '). Show (3000);

Explanation: By controlling the width, transparency, display properties of the element, it is displayed gradually, and after 2 seconds.

Way three:

$ ("div"). Show ("slow");

The parameters can be:

• Slow slow: 600ms

• Normal: 400ms

• Fast fast: 200ms

Explanation: Similar to mode two, it is also gradually displayed by controlling the width, transparency, and display properties of the element.

Mode four:

Show (millisecond value, callback function;    $ ("div"). Show (5000,function () {        alert ("The animation is finished!") ");    });

Explanation: The callback function executes immediately after the animation has finished executing.

Summarize:

The above four approaches are almost identical: The parameters can be two, the first is the execution time of the animation, and the second is the callback function that executes after the animation ends.

Hide Animation

Way to refer to the show () method above. As follows:

    $ (selector). Hide ();    $ (selector). Hide (+);     $ (selector). Hide ("slow");    $ (selector). Hide (+, function () {});

Implement click button to display the box, then click the button to hide the box

The code is as follows:

<!        DOCTYPE html>
On -off display hidden animation
$ (' #box '). Toggle (3000,function () {});
The toggle () method is used to show and hide the back and forth switch: Execute show () first, then hide ().
The code is as follows:
    $ (' #btn '). Click (function () {            $ (' #box '). Toggle (3000,function () {                $ (this). Text (' box out ');                    if ($ (' #btn '). Text () = = ' hidden ') {                    $ (' #btn '). Text (' show ');                    } else{                    $ (' #btn '). Text (' hidden ');                    }            })        
Slide in and slide out
1, slide into the animation effect : (similar to the life of the shutter door)
$ (selector). Slidedown (speed, callback function);
Explanation: Under pull drawing, display element.
Note: Omit the argument or pass in an illegal string, then use the default value: 400 milliseconds (same for fadein/slidedown/slideup)
2, slide out the animation effect:
$ (selector). Slideup (speed, callback function);
Explanation: Pull the picture on, hide the element.
3. Slide-in slide-out toggle animation effect:
$ (selector). Slidetoggle (speed, callback function);
The code is as follows:
<! DOCTYPE html>Fade animation
1. Fade in animation effect:
$ (selector). FadeIn (speed, callback);
Function: Let the elements show up in a faint way into sight.
2, fade out the animation effect:
$ (selector). FadeOut (1000);
Function: To hide elements in a way that fades away
3. Fade-in fade animation effect:
$ (selector). Fadetoggle (' Fast ', callback);
Function: Toggles the display or hidden state of matching elements by changing the transparency.
The meaning of the parameter is the same as the show () method.
The code is as follows:
<! DOCTYPE html>Custom animations
Grammar:
$ (selector). Animate ({params}, speed, callback);
Function: Performs a custom animation of a set of CSS properties.

 
   

  
    
 
     
The first parameter represents: The CSS property to be animated (required)
 
     
The second parameter indicates: The duration of the animation is performed (optional)
 
     
The third parameter means: The callback function that executes immediately after the animation is executed (optional)
 
    
 
   
The code is as follows:
<! DOCTYPE html>Stop animation
$ (selector). Stop (true, false);
The two parameters inside, have different meanings.
First parameter:

 
    

  
     
 
      
True: Subsequent animations do not execute.
 
      
False: Subsequent animations will execute.
 
     
 
    
A second parameter:

 
    

  
     
 
      
True: Immediate execution completes the current animation.
 
      
False: Stops the current animation immediately.
 
     
 
    
PS: If all parameters are not written, the default of two is false. The actual work, directly write stop () use more.
Case: When hovering over the mouse, pop-up drop-down menu (draw when pull down)
<! DOCTYPE html>
Ps:
Javascript:void (0); As with javascript: effect
In the above code, the key is to stop the animation before performing the animation by using the Stop function.
03-jquery animation effects