.animate( properties, [duration,] [easing,] [complete] )
animate() allows a particular element to move from one stage to another. It can change almost all numerical properties of the css to animate the elements.However, non numerical properties like background-color cannot be changed through this method.
It accepts four arguments. It differs from other previously discussed effects in the way that it takes a map of CSS properties that the animation will move toward. Animated properties can also be relative. If a value is supplied with a leading += or -= sequence of characters, then the target value is computed by adding or subtracting the given number from the current value of the property.The animate method also works on the hidden object, but it doesn't make them visible as its a non-numeric value. We will explain the method through an example.
AnimateUndoI will animate
The first argument of the animate() method is the set of CSS properties towards which we wish to move. For the block to animate, we set a CSS values and we gave a time of 1500ms (1.5s) to complete the animation. The undo button simply fetches the element back to the CSS attributes initially assigned to them.
Can you distinguish the way Box1 and Box2 animate in the example given below :-
Hope you would have pointed out the difference by now. The first one does the animation one by one, while the second one moves towards the newer CSS simultaneously. This can be done by setting queue to false, so that jQuery doesn't perform the changes one by one. Lets see the changes in code we require.
Animate Box 1Animate Box 2
Reset Box 1Reset Box 2
Box 1Box 2
We have set queue to false in the case of 2nd box.
We have covered almost all the important effects that are used often. Lets see some other basics of jQuery :-