JQuery animation effect summary and jquery animation Summary
1. animation method description
Method Name |
Description |
Hide () and show () Methods |
You can modify multiple style attributes, that is, height, width, and opacity. |
FadeIn () and fadeOut () Methods |
Only change opacity |
SlideUp () and slideDown () Methods |
Only change height |
FadeTo () method |
Only change opacity |
Toggle () method |
Used to replace the hide () and show () methods, so you can modify the height, width, and opacity style. |
SlideToggle () method |
Used to replace the slideUp () and slideDown () methods, so the height can only be changed |
FadeToggle () method |
Used to replace the fadeIn () and fadeOut () methods, so the opacity can only be changed. |
Animate () method |
The animation is a Custom Animation. In essence, all the above animations call the animate () method. In addition, other styles can be defined using the animate () method directly, such as "left", "marginLeft", and "ScrollTop ". |
Note that the animate () method can be used to replace all other animations.
- Replace the show () method with the animate () method
1 $ ("p"). animate ({height: "show", width: "show", opacity: "show"}, 400 );
It is equivalent:
1 $ ("p"). show (400 );
- Use the animate () method instead of the fadeIn () method
1 $ ("p"). animate ({opacity: "show"}, 400 );
It is equivalent:
1 $ ("p"). fadeIn (400 );
- Use the animate () method instead of the slideDown () method
1 $ ("p"). animate ({height: "show"}, 400 );
It is equivalent:
1 $ ("p"). slideDown (400 );
- Use the animate () method instead of the fadeTo Method
1 $ ("p"). animate ({opacity: "0.6"}, 400 );
It is equivalent:
1 $ ("p"). fadeTo (0.6, 400 );
- In fact, these animations are a simplified form of built-in style attributes in the animate () method. In the animate () method, these specific style attribute values can be "show", "hide", "toggle", or custom numbers (values)
2. animation queue
(1) animation effects on a group of elements
- When multiple attributes are applied in an animate () method, the animation will occur;
- When an animation method is applied in chained mode, the animation is executed in sequence;
(2) animation on multiple groups of Elements
- By default, all animations occur simultaneously;
- When an animation method (for example, css () method is used as a callback function to make non-animation methods run in order, you need to write these methods into the callback function of the animation method ), the animation is executed in the callback order.