animate() in jQuery
To create custom animations in jQuery animate() method is used.
This method uses CSS styles to change an from elements styles to another style.
$(selector).animate(properties[, duration][, easing][, complete])
- properties - It indicate CSS properties and values.
- Default value is 400.
- number - Integer values are given in milliseconds.
- slow - It specifies 600 milliseconds.
- fast - It specifies 200 milliseconds.
- easing - It is optional, it specifies speed at which the animation progresses.It can have two values.
- swing - It is a default value, animation progresses irregular way.
- linear - it specifies animation progresses at a constant pace.
- complete - It indicate a function, and it will be executed after the element animation complete.
- options - Options given below are optional
- duration - It is used to determine how long the animation will run. It can be defined by string or number.
- easing - It is used to determine for transition which easing function to be used. It is defined by string.
- queue - It is denoted by Boolean, whether to place the animation in the effects queue. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it. If it is specified as false, the animation will begin immediately.
- specialEasing - It is an object which contains one or more of the CSS properties. These properties are defined by arguments and its corresponding easing functions.
- step - It is used to denote a function for each element when calling animated property.
- progress - It is used to denote a function to be called after each step of the animation.
- complete - It is used to denote a function, which is called after the animation on an element is complete.
- start - It is used to denote a function, when the elements animation begins.
- done - It is used to denote a function, when the animation on an element completes.
- fail - It is used to denote a function, when the animation of an element fails to complete.
- always - It is used to denote a function, when the animation on an element completes or stops without completing.
Example 1 - animate to margin-top:50px
Example 2 - animate to margin-top:50px within 2000ms(2sec)
Example 3 - animate() with complete function
Example 4 - calling complete function using function name
Example 5 - animate() with multiple css properties
Example 6 - animate() with options
Example 7 - animate() with options and progress bar