Understanding jQuery animate() function
jQuery animate() function is very powerful API to manipulate html elements and add animation functionality. The use of animate function is very simple. First lets check the syntax of this function. .animate( properties, [ duration ], [ easing ], [ callback ] )
  • properties: A map of CSS properties that the animation will move toward.
  • duration: A string or number determining how long the animation will run.
  • easing: A string indicating which easing function to use for the transition.
  • callback: A function to call once the animation is complete.
.animate( properties, options )
  • properties: A map of CSS properties that the animation will move toward.
  • options: A map of additional options to pass to the method. Supported keys:
    • duration: A string or number determining how long the animation will run.
    • easing: A string indicating which easing function to use for the transition.
    • complete: A function to call once the animation is complete.
    • step: A function to be called after each step of the animation.
    • queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.
    • specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).
Lets learn the animate() function with set of examples. First include the jQuery javascript library in your html file. Add following in your html <HEAD> tag: 
<SCRIPT type="text/javascript" 
  src="http://code.jquery.com/jquery-latest.js"></SCRIPT>

Code language: HTML, XML (xml)
For all the demos, we will use a sample DIV tag for animating. Following is the div code and its stylesheet. 
<style type="text/css">
#content {
 background-color:#ffaa00;
 width:300px;
 height:30px;
 padding:3px;
}
</style>
<input type="button" id="animate" value="Animate"/>
<div id="content">Animate Height</div>

Code language: HTML, XML (xml)

Animate height/width

Animating height and width in jQuery is very easy. Lets assume you have a DIV that you want to animate i.e. increase the height. 
$("#animate").click(function() {
 $("#content").animate(
   {"height": "80px"},
   "fast");
});

Code language: JavaScript (javascript)
Demo 1:
Also following will be the code to animate Width of the element. 
$("#animate").click(function() {
 $("#content").animate(
   {"width": "350px"},
   "fast");
});

Code language: JavaScript (javascript)
Demo 2:

Animate opacity

$("#animate").click(function() {
 $("#content").animate(
   {"opacity": "0.15"},
   "slow");
});

Code language: JavaScript (javascript)
Demo 3:

Moving elements using animate()

<STYLE>
#content {
 background-color:#6688ff;
 position:absolute;
 width:100px;
 height:100px;
 padding:3px;
 margin-top:5px;
 left: 100px;
}
</STYLE>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>

Code language: HTML, XML (xml)
$("#right").click(function() {
 $("#content").animate(
   {"left": "+=50px"},
   "slow");
});
$("#left").click(function() {
 $("#content").animate(
   {"left": "-=50px"},
   "slow");
});

Code language: JavaScript (javascript)
Demo 4:

Callback Function

Callback functions are very useful to perform certain activity when the animation is completed. Also note here when multiple elements are mapped with the animation and we have specified a callback function. Then the callback will get called for each of the element. Let us see an example where we use callback function to display a message when animation is completed. 
$("#animate").click(function() {
 $("#content").animate(
   {"height": "100px", "width": "250px"},
   "slow", function(){
    $(this).html("Animation Completed");
   });
});
Code language: JavaScript (javascript)
Demo 5:

Combine multiple animations

You may want to combine multiple animations. Following are few demos will help you understanding this. Example 1: Animate both height and width at same time. This example is pretty straight forward. You can animate both height and width at same time by specifying it in animate function. For example: In below code we specified height and width value in animate function. 
$("#animate").click(function() {
 $("#content").animate(
   {"height": "100px", "width": "250px"},
   "slow", );
});
Code language: JavaScript (javascript)
Example 2: Queuing the animations. 
$("#animate").click(function() {
 $("#content")
  .animate({"height": "100px"}, 500)
  .animate({"width": "250px"}, 500);
});

Code language: JavaScript (javascript)
Demo 6:

Queuing of Events

In above demo (Demo 6) we saw that when we queued up the events with multiple .animate() method call, the animation is actually queued up. i.e. it completes the first animation and then proceed with next. Let see an example were we use queue parameter to disable queuing. In following example we have set parameter queue to false. The code is exactly same as demo 6, only change we added is queue = false. Also note that queue parameter is added with second argument. 
$("#animate").click(function() {
 $("#content")
  .animate({"height": "100px"}, {"queue": false, "duration": 500})
  .animate({"width": "250px"}, 500);
});

Code language: JavaScript (javascript)
Demo 7:

View Comments

Leave a Comment
Share
Published by
Viral Patel
Tags: JQuery jQuery Effects
15 years ago

Recent Posts

  • Java

Java URL Encoder/Decoder Example

Java URL Encoder/Decoder Example - In this tutorial we will see how to URL encode/decode…

4 years ago
  • General

How to Show Multiple Examples in OpenAPI Spec

Show Multiple Examples in OpenAPI - OpenAPI (aka Swagger) Specifications has become a defecto standard…

4 years ago
  • General

How to Run Local WordPress using Docker

Local WordPress using Docker - Running a local WordPress development environment is crucial for testing…

4 years ago
  • Java

Create and Validate JWT Token in Java using JJWT

1. JWT Token Overview JSON Web Token (JWT) is an open standard defines a compact…

4 years ago
  • Spring Boot

Spring Boot GraphQL Subscription Realtime API

GraphQL Subscription provides a great way of building real-time API. In this tutorial we will…

4 years ago
  • Spring Boot

Spring Boot DynamoDB Integration Test using Testcontainers

1. Overview Spring Boot Webflux DynamoDB Integration tests - In this tutorial we will see…

5 years ago