Animating elements using jQuery

In this lesson, you will learn how to animate a web element using .animate() jQuery function.

Introduction to Animation in jQuery

They syntax of .animate() function has two variants.

.syntax ( {json object of properties} [, duration] [, easing function] [, callback function ])

Or

.syntax ( {json object of properties }, options )

The .animate() function is used to create an animation effect on CSS properties of the selected web element. The only required parameter here is the JSON object of CSS properties. The rest of the parameters are optional.

Not every CSS property can be animated. For example, single numeric properties like width, height, left, top can be animated but background-color, the display cannot.

It makes sense to animate font size but doesn’t make sense if you want to change the font family from Verdana to Calibri.

Duration specifies the time in milliseconds the animation takes to complete. You can pass the string values like slow, fast, normal or numerical values presenting time in milliseconds. Higher the number of the duration, slower the animation will be. The default duration is 400 milliseconds, which also equal to normal speed. Other string values such as fast or slow are equal to 200 and 600 milliseconds.

Easing function represents the animation speed at various points during the animation. The default easing function is swing which has slightly fast speed at the starting and ending points of the animation and has constant speed otherwise.

Callback functions are called when the animation is completed. This is used to execute more than one animation effect in a sequence.

Options specify the additional information for the animation progression.
The options are:

1. Duration – the speed of the animation.
2. Easing – specify the speed of the animation at various points during the animation.
3. Callback – jQuery function called when the animation is completed.
4. Step – jQuery function called at each step in the animation.
5. Progress – a function called at the end of each step in the animation.
6. Queue – it’s a Boolean value which determines whether or not to execute the animation immediately.
7. specialEasing – a map of one or more CSS properties.
8. Start – a callback function called when the animation begins.
9. Done – a callback function called when the animation ends.
10. Fail – a function called when animation fails to complete.
11.  Always – a function called no matter if the animation finishes or not.

To specify various objection you need to write these a JSON object.

The syntax for writing options is:

$("element").animate({styles},{option1: value, option2: function(){});

Example of Animation in jQuery

In this example, we will select a div with a class ‘box’ and then call the .animate() function with JSON object for style properties (width and height), speed (5seconds), and other options. In the beginning, the div will have equal width (100px) and height (100px). If you click on a hyperlink ‘Start animation’, the box will starts to grow. Once it reaches 200px wide and 200px tall, it will starts to shrink again and will go back to its original width (100px) and height (100px).

Animation Started

Animation in process

Animation completed

The HTML

<div id="container">
   <p><a href="#" id="anim">Start animation</a></p>
   <div class="box one"></div>
</div>

The CSS

* {
	box-sizing: border-box;
}

body {
	font-family: 'Open Sans', sans-serif;
	color: #333;
	font-size: 14px;
}

a:hover,
a {
	text-decoration: none;
}

.box {
	width: 100px;
	height: 100px;
	margin: 2px;
}

.one {
	background-color: #d9eb4b;
}

#container {
	margin: 20px;
	padding: 10px;
	border: 1px solid #ccc;
	width: 400px;
}

The jQuery

<
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" >
    <
    /script> <
    script >
    $(document).ready(function() {
        $('#anim').click(function() {
            $('.box').animate({
                height: '200px',
                width: '200px'
            }, { // options parameter
                duration: 5000,
                complete: function() {
                    $(this).animate({
                            height: '100px',
                            width: '100px'
                        }, 5000,
                        function() {
                            $('#anim').text('Animation completed...');
                        });
                },
                start: function() {
                    $('#anim').text('Animation in process... ');
                }
            });

        });
    });

If this seems too much for you, try to practice with the required parameter (JSON object of CSS properties) and then add other optional parameters.

In case you have any question(s), feel free to leave it in the comments section below, and I will try to reply to you at the earliest.