Back to: jQuery Tutorials
jQuery Animate Function with Examples
In this article, I am going to discuss jQuery Animate Function with Examples. Please read our previous article, where we discussed jQuery Image Slideshow with Thumbnails. At the end of this article, you will learn that how to add any custom animation to any element of the DOM
jQuery Animate Function
The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animation effect. Only numeric values can be animated (like “margin:30px”). String values cannot be animated (like “background-color:red”), for this you need a jQuery plug-in. You can use the strings “show”, “hide” and “toggle” as values. These values allow hiding and showing the animated element.
Note: Use “+=” or “-=” for relative animations (like width ”+=30px”). This will increase the width by 30px
Syntax: (selector).animate( {styles}, speed, easing, callback)
Parameters:
- styles: Required. Specifies one or more CSS properties/values to animate. The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.
- speed: Optional. Specifies the speed of the animation. The default value is 400 milliseconds. Possible values in milliseconds (like 100, 1000, 5000, etc.), “slow”, and “fast”.
- easing: Optional. Specifies the speed of the element in different points of the animation. The default value is “swing”. Possible values: “swing” – moves slower at the beginning/end, but faster in the middle. “linear” – moves in a constant speed
- callback: Optional. A function to be executed after the animation completes.
Example1: jQuery Animate Function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
body {
background-color: rgb(226, 225, 225);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
img {
width: 600px;
height: 400px;
opacity: 0.4;
}
.btn {
background-color: #1c4450;
border: none;
outline: none;
color: white;
padding: 20px 35px;
margin: 20px;
text-align: center;
display: inline-block;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
transition-duration: 0.4s;
text-transform: uppercase;
}
.btn:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
</style>
</head>
<body>
<h1>jQuery Animate Function</h1>
<img src="D:\Images\MyImage.jpg" alt="photo">
<button class="btn">Click to Animate The Image</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(document).ready(function () {
$("button").click(function () {
$("img").animate({ width: "800px", height: "600px", opacity: "1" })
});
});
});
</script>
</body>
</html>
Now run the above code and you will get the following output in the browser.
Now click on the button and you will see that the image will gradually increase its height and width and opacity will be “1” as shown in the below image.
You can also increase or decrease the values of properties using “+=” or “-=” as follows.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("img").animate({ width: "+=200px", height: "+=200px", opacity: "1" })
});
});
</script>
This will produce the same result.
Example2: Animate Function in jQuery
In the below example, we are using the “speed”, “easing”, and “callback” parameters. Notice that we are setting the speed to 1500 ms, the easing to “linear” and in the callback, we are printing a text on the <p> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
body {
background-color: rgb(226, 225, 225);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
.btn {
background-color: #1c4450;
border: none;
outline: none;
color: white;
padding: 20px 35px;
margin: 20px;
text-align: center;
display: inline-block;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
transition-duration: 0.4s;
text-transform: uppercase;
}
.btn:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.test {
width: 400px;
height: 80px;
background-color: rgb(152, 255, 203);
padding: 100px 0;
margin: 20px 0;
text-align: center;
font-size: 20px;
font-weight: 400;
border-radius: 20px;
border: 1px solid #000;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
position: relative;
}
p {
margin: 20px;
font-weight: bold;
font-size: 30px;
text-align: center;
font-style: oblique;
}
</style>
</head>
<body>
<h1>jQuery Animate Function</h1>
<div class="test">Hey! Beautiful People!!</div>
<button class="btn">Click to Animate The DIV</button>
<p id="result"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div").animate({
left: "200px",
fontSize: "24px",
fontWeight: "800",
borderWidth: "5px"
}, 1500, "linear", function () {
$("p").html("Animation ended");
})
});
});
</script>
</body>
</html>
When you run the above code, you will get the following output.
Now click on the button and you will get the following output in the browser.
In the above example, all the animations are happening in a parallel way. But if you want the animations to happen one after another then you can use method chaining. In this way, the animations will be executed in a queue. Modify the script section of the example as shown below and see the output by clicking on the button.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div")
.animate({ left: "200px" }, 1500)
.animate({ fontSize: "24px" }, 1500)
.animate({ fontWeight: "800" }, 1500)
.animate({ borderWidth: "5px" }, 1500, function () {
$("p").html("Animation ended");
})
});
});
</script>
There is an alternate syntax of .animate() method
Syntax: (selector).animate({styles},{options})
Parameters:
Example 2 can be achieved by this syntax also
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
body {
background-color: rgb(226, 225, 225);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1 {
font-size: 40px;
margin-bottom: 30px;
padding: 30px;
text-align: center;
text-transform: capitalize;
font-style: italic;
}
.btn {
background-color: #1c4450;
border: none;
outline: none;
color: white;
padding: 20px 35px;
margin: 20px;
text-align: center;
display: inline-block;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
transition-duration: 0.4s;
text-transform: uppercase;
}
.btn:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.test {
width: 400px;
height: 80px;
background-color: rgb(152, 255, 203);
padding: 100px 0;
margin: 20px 0;
text-align: center;
font-size: 20px;
font-weight: 400;
border-radius: 20px;
border: 1px solid #000;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
0 17px 50px 0 rgba(0, 0, 0, 0.19);
position: relative;
}
p {
margin: 20px;
font-weight: bold;
font-size: 30px;
text-align: center;
font-style: oblique;
}
</style>
</head>
<body>
<h1>jQuery Animate Function</h1>
<div class="test">Hey! Beautiful People!!</div>
<button class="btn">Click to Animate The DIV</button>
<p id="result"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div").animate({
left: "200px",
fontSize: "24px",
fontWeight: "800",
borderWidth: "5px"
}, {
duration: 5000,
easing: "linear",
start: function () {
$("p").html("Animation started");
},
complete: function () {
$("p").html("Animation ended");
},
fail: function () {
$("p").html("Animation failed to execute");
}
})
});
});
</script>
</body>
</html>
Now run the above code and you will get the same output as the second example.
In the next article, I am going to discuss jQuery Animation Queue with Examples. Here, in this article, I try to explain the jQuery Animate Function with Examples and I hope you enjoy this jQuery Animate Function article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.