jQuery Animation
The jQuery animate() method is commonly used to build custom animations. It is mostly used to animate numeric CSS properties, for instance, height, width, padding, opacity, top, margin, left, and so on. However, the non-numeric properties such as color or background color cannot be animated using the basic jQuery functionality.
Syntax
$(selector).animate({ properties }, duration, callback);
Below are the parameters of the animate() method with their meanings:
- The required properties parameter defines the animated CSS properties.
- Also, the optional duration parameter specifies how long the animation will run. You can specify the duration either by using one of the predefined strings' 'slow' or 'fast', or in several milliseconds; as higher values indicate slower animations.
- Once an animation is complete an optional callback parameter is the function used to make the call.
Below is a simple example of the jQuery animate() method that animates an image from its original
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Animation Effects</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
img{
position: relative; /* Required to move element */
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>
</head>
<body>
<button type="button">Start Animation</button>
<p>
<img src="/assets/example/images/tutorialwithexample-logo.png" alt="Tutorialwithexample-logo">
</p>
</body>
Animate Multiple Properties At Once
The animate() method is used to animate multiple properties of an element together at the same time. The properties are animated simultaneously without any delay.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Multiple Properties Animation</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box{
width: 100px;
height: 100px;
background: #9d7ede;
margin-top: 30px;
border-style: solid; /* Required to animate border width */
border-color: #6f40ce;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>
</head>
<body>
<button type="button">Start Animation</button>
<div class="box"></div>
</body>
</html>
Animate Multiple Properties One by One or Queued Animations
The jQuery’s chaining is used to animate multiple properties of an element one by one individual in a queue. In the next tutorial, you'll learn more about chaining.
The example below illustrates a jQuery queued or chained animation, where each animation will start once the previous animation on the element has been completed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Queued Animation</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box{
width: 100px;
height: 100px;
background: #9d7ede;
margin-top: 30px;
border-style: solid; /* Required to animate border width */
border-color: #6f40ce;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box")
.animate({width: "300px"})
.animate({height: "300px"})
.animate({marginLeft: "150px"})
.animate({borderWidth: "10px"})
.animate({opacity: 0.5});
});
});
</script>
</head>
<body>
<button type="button">Start Animation</button>
<div class="box"></div>
</body>
</html>
Animate Properties with Relative Values
One can also define the relative values for the animated properties. However, a value can be specified with a leading ‘+=’ or ‘- =’ prefix, then the target value is calculated by adding or removing (subtracting) the given number from the current value of the property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Animation with Relative Values</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box{
width: 100px;
height: 100px;
background: #9d7ede;
margin-top: 30px;
position: relative; /* Required to move element */
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>
</head>
<body>
<button type="button">Start Animation</button>
<p><strong>Note:</strong> Click the "Start Animation" button multiple times to see how the relative value works.</p>
<div class="box"></div>
</body>
</html>
Animate Properties with Pre-defined Values
Furthermore, in numeric values, each property can take the strings 'show', 'hide', and 'toggle'. However, it can be very helpful in situations where you simply want to animate the property from its current value to the initial value, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of jQuery Animation with Pre-defined Values</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.box{
width: 80%;
height: 200px;
background: #9d7ede;
margin-top: 30px;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>
</head>
<body>
<button type="button">Toggle Animation</button>
<div class="box"></div>
</body>
</html>