jQuery Animations – Using the animate() Method
The animate() method in jQuery allows you to create custom animations by
changing CSS properties dynamically over time.
Syntax:
$(selector).animate({properties}, speed, callback);
- properties (required): A set of CSS property/value pairs to animate.
- speed (optional): The duration of the animation. Accepts "slow", "fast", or a value in milliseconds.
- callback (optional): A function to run once the animation is complete.
Example:
Here's a simple example that moves a <div> element 250 pixels to the
right when a button is clicked:
<!DOCTYPE html>
<html>
<head>
<title>jQuery animate() Example</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({ left: '250px' }); // animate div to the right
});
});
</script>
<style>
div {
width: 100px;
height: 100px;
position: absolute; /* required for left/right movement */
background-color: orange;
line-height: 100px;
text-align: center;
font-weight: bold;
color: white;
border-radius: 8px;
}
button {
margin-top: 150px;
padding: 8px 16px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>jQuery animate() Example</h2>
<button>Click to Animate</button>
<div>Move Me</div>
</body>
</html>
This method is great for creating smooth, interactive effects on your
webpage, enhancing user experience with just a few lines of code.
jQuery animate() – Animate Multiple Properties
With jQuery's animate() method, you’re not limited to just one
property you can animate several CSS properties at the same time.
Example:
In the following example, when a button is clicked, a <div> element
moves to the right, changes its opacity, and resizes both in height and
width:
<!DOCTYPE html>
<html>
<head>
<title>jQuery animate() Multiple Properties</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px', // move right
opacity: 0.5, // fade to 50%
height: '150px', // increase height
width: '150px' // increase width
});
});
});
</script>
<style>
div {
width: 100px;
height: 100px;
position: absolute; /* required for left movement */
background-color: teal;
line-height: 100px;
text-align: center;
font-weight: bold;
color: white;
border-radius: 8px;
}
button {
margin-top: 180px;
padding: 8px 16px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>jQuery animate() with Multiple Properties</h2>
<button>Click to Animate</button>
<div>Animate Me</div>
</body>
</html>
This flexibility allows you to create more dynamic and visually appealing
animations by updating multiple style properties in a single call.
jQuery animate() – Using Relative Values
jQuery’s animate() method also supports relative values, allowing you
to adjust an element’s properties in relation to their current state.
You can do this by using += or -= before the value.
Example:
In this example, when the button is clicked, the <div> element
moves to the right and increases in both height and width by 150 pixels
relative to its current size:
<!DOCTYPE html>
<html>
<head>
<title>jQuery animate() with Relative Values</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px', // move right
height: '+=150px', // increase height by 150px
width: '+=150px' // increase width by 150px
});
});
});
</script>
<style>
div {
width: 100px;
height: 100px;
position: absolute; /* needed for left movement */
background-color: purple;
line-height: 100px;
text-align: center;
font-weight: bold;
color: white;
border-radius: 8px;
}
button {
margin-top: 200px;
padding: 8px 16px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>jQuery animate() with += Values</h2>
<button>Click to Animate</button>
<div>Grow Me</div>
</body>
</html>
This is especially useful when you want to incrementally adjust sizes
or positions without knowing the element’s exact current values.
jQuery animate() – Using Predefined Values
In addition to numeric and relative values, jQuery’s animate() method
also supports predefined keywords such as "show", "hide", and "toggle".
These keywords allow you to animate an element’s visibility with smooth
transitions.
Example:
The following example toggles the height of a <div> element each
time the button is clicked:
<!DOCTYPE html>
<html>
<head>
<title>jQuery animate() height toggle</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height: 'toggle' // toggles between hide/show by height
});
});
});
</script>
<style>
div {
width: 200px;
height: 150px;
background-color: steelblue;
line-height: 150px;
text-align: center;
font-weight: bold;
color: white;
border-radius: 8px;
margin-top: 10px;
}
button {
padding: 8px 16px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>jQuery animate() with height: 'toggle'</h2>
<button>Click to Toggle Height</button>
<div>Toggle Me</div>
</body>
</html>
Using "toggle" provides an easy way to show or hide elements with
animation, creating a more interactive and user-friendly
interface.
jQuery animate() – Understanding Queue Functionality
One of the powerful features of jQuery’s animate() method is its
built-in queue functionality. By default, when you chain multiple
animate() calls, jQuery places them into an internal queue and
executes them one after the other, not simultaneously.
This is especially useful when you want to create a sequence of
animations without needing to manage timing manually.
Example:
In the example below, each animation is executed in order, creating a
smooth and sequential effect:
<!DOCTYPE html>
<html>
<head>
<title>jQuery animate() Chained Example</title>
<!-- jQuery link -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({ height: '300px', opacity: 0.4 }, "slow");
div.animate({ width: '300px', opacity: 0.8 }, "slow");
div.animate({ height: '100px', opacity: 0.4 }, "slow");
div.animate({ width: '100px', opacity: 0.8 }, "slow");
});
});
</script>
<style>
div {
width: 100px;
height: 100px;
background-color: darkorange;
line-height: 100px;
text-align: center;
font-weight: bold;
color: white;
border-radius: 8px;
position: relative;
margin-top: 15px;
}
button {
padding: 8px 16px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>jQuery animate() Sequential Example</h2>
<button>Click to Animate</button>
<div>Box</div>
</body>
</html>
Each animate() call waits for the previous one to complete before
starting, allowing you to build complex animations in a clean and
readable way.
More topic in jQuery
