jQuery Effects - Animation

animate() method

jQuery animate() method is used to create custom animations.

Syntax:

$(selector).animate({params},speed,callback);

Required params parameter definition to form animation CSS properties.

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function to be executed after the animation is completed.

      
  开始动画 
向右移动
 
 
  

Note:

By default, all HTML elements have a static position and cannot be moved.
If you need to operate the position, remember to first set the CSS position property of the element to relative, fixed or absolute!

animate() - Manipulate multiple properties

      
  开始动画 
逐渐变大
 
 
  

Can I use the animate() method to manipulate all CSS properties?
Yes, almost! However, there is one important thing to remember: when using animate(), you must use Camel notation to write all property names, for example, you must use paddingLeft instead of padding-left, use marginRight instead of margin-right, etc. .Also, color animation is not included in the core jQuery library.

animate() - uses relative values

      
  开始动画 

 
 
  

animate() - uses predefined values

      
  开始动画 
收起
 
 
  

animate() - uses queue functions

By default, jQuery provides queue functionality for animations.

This means that if you write multiple animate() calls after each other, jQuery will create an "internal" queue containing those method calls. Then run these animate calls one by one.

      
  开始动画