Custom Animations with animate()
In this page:
$(selector).animate({ property: value }, duration, easing, callback);Basic animate()
The animate() method smoothly transitions one or more numeric CSS properties on an element to new target values over a set duration. It only works on properties with numeric values, like width or opacity, not on colors without a plugin.
Example: Basic animate()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text("Animating...");
$("#box").animate({width: "300px"}, function() { $("#output").text("Width is now " + $(this).width() + "px"); });
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css({width: "100px"});
$("#output").text("");
});
</script>
</body>
</html>Multiple Properties
Passing an object with several properties, like {width: 200px, opacity: 0.5}, animates all of them together in one call, saving you from chaining multiple separate .animate() calls that would otherwise run out of sync.
Example: Multiple Properties
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:100px;opacity:1">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text("Animating...");
$("#box").animate({width: "200px", opacity: 0.5}, function() { $("#output").text("Width and opacity animated together"); });
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css({width: "100px", opacity: 1});
$("#output").text("");
});
</script>
</body>
</html>Duration
The second argument to animate() sets how long the transition takes, either as milliseconds or a keyword like slow or fast, giving you direct control over animation pacing.
Example: Duration
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:100px">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text("Animating...");
$("#box").animate({width: "300px"}, 2000, function() { $("#output").text("Finished after 2 seconds"); });
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css({width: "100px"});
$("#output").text("");
});
</script>
</body>
</html>Opacity
Opacity is one of the few non-pixel numeric properties animate() understands out of the box, letting you fade an element in or out as part of a larger multi-property animation.
Example: Opacity
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text("Animating...");
$("#box").animate({opacity: 0}, function() { $("#output").text("Opacity is now 0"); });
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css({opacity: 1});
$("#output").text("");
});
</script>
</body>
</html>Relative Values
Prefixing a target value with += or -=, like {left: '+=50px'}, animates a property relative to its current value instead of to an absolute one, which is useful for nudging an element by a fixed amount regardless of its starting position.
Example: Relative Values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="position:relative;left:0px">Box</div>
<button id="btn">Move Right</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text("Animating...");
$("#box").animate({left: "+=50px"}, function() { $("#output").text("Left is now " + $(this).css("left")); });
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css({left: "0px"});
$("#output").text("");
});
</script>
</body>
</html>- Trying to animate non-numeric values, such as
.animate({color: "red"}), which jQuery core cannot do without a plugin. - Writing CSS names with hyphens like
{background-color: "red"}, which is a syntax error; use camelCasebackgroundColorin the object. - Animating
widthon an element with no set size ordisplay:inline, so nothing seems to happen because inline elements ignore width.
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: