Using jQuery animate effects you can create custom animations.
jQuery animate():
The jQuery animate() method is used to perform a custom animation of a set of CSS properties.
Syntax:
$(selector) is to select the HTML element on which this animation effect is being applied.
The parameters define the CSS properties that are used in animation.
The speed is an optional parameter, it is used for adjusting the speed of the animation. It can be provided in milliseconds or “slow” or “fast”.
callback_function is also an optional parameter, it is passed as a parameter to the animate() method. It executes when the animation is finished.
jQuery animate() - Manipulate Multiple Properties:
You can animate multiple properties at the same time:
Note: By default the position of all the elements in an HTML page is “static” which means they cannot be moved as we did in the example above, so to change the position during the animation you have to first set the position of the HTML element to a relative, fixed, or absolute.
jQuery animate() using Relative Values:
We can also use relative values in the animate method. For example height: ‘+=50px’, will increase the current height with 50px each time the animate method executes.
jQuery animate() using Pre-defined Values:
We can use predefined properties such as “show”, “hide” or “toggle” in the animate() method.
jQuery queue Multiple animate() Methods:
When you define multiple animate() methods, the jQuery queues them in the given order so the animation takes place one by one, this brings a cool effect in the animation. You can do a lot more things using this functionality.
For example, you define an animate() method where you are setting up the font size of a specific text to large and then in the second animate method() method you set the font size of that same text to small so when this animation takes place, it will bring a popup effect to the text you have highlighted using animate() method. Let’s see this example.