JQuery animation effect summary and jquery animation Summary

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.