Custom Transitions and Easing
In this page:
$("selector").animate({property: value}, duration, "easingName");
// easingName: "linear", "swing", or a plugin easing such as "easeInQuad"What is Easing?
Easing describes the acceleration curve of an animation over time — how its speed changes from start to finish — rather than the constant, unchanging speed a plain linear animation would use. A well-chosen easing curve is often what makes an animation feel natural instead of mechanical.
Example: What is Easing?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:50px">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text('Easing: "linear"');
$("#box").animate({width: "300px"}, 1000, "linear");
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css("width", "50px");
$("#output").text("");
});
</script>
</body>
</html>Ease In and Ease Out
Ease-in starts an animation gently and gradually speeds up toward the end, which can feel like something building up momentum. It's a less common default than ease-out, but useful for animations that should feel like they're gathering energy.
Example: Ease In and Ease Out
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:50px">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text('Easing: "easeInQuad"');
$("#box").animate({width: "300px"}, 1000, "easeInQuad");
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css("width", "50px");
$("#output").text("");
});
</script>
</body>
</html>Ease In and Out
Ease-out starts an animation quickly and gradually slows down as it approaches its final position, mimicking how physical objects naturally decelerate. This is one of the most commonly used easing styles in interface design because it feels responsive without an abrupt stop.
Example: Ease In and Out
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:50px">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text('Easing: "easeOutQuad"');
$("#box").animate({width: "300px"}, 1000, "easeOutQuad");
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css("width", "50px");
$("#output").text("");
});
</script>
</body>
</html>Easing with UI Effects
Ease-in-out combines a gentle start with a gentle finish, speeding up through the middle of the animation. It often feels the smoothest of the common easing styles for interface animations like panels sliding open or elements fading into view.
Example: Easing with UI Effects
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<style>
#box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="box" style="width:50px">Box</div>
<button id="btn">Animate</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#output").text('Easing: "easeInOutQuad"');
$("#box").animate({width: "300px"}, 1000, "easeInOutQuad");
});
$("#resetBtn").on("click", function() {
$("#box").stop(true).css("width", "50px");
$("#output").text("");
});
</script>
</body>
</html>Small Easing Project
jQuery UI's effects — like slide, fade, and bounce — can all be given a specific easing function to control exactly how they accelerate and decelerate, letting you fine-tune the feel of transitions like menus opening or notifications appearing.
Example: Small Easing Project
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<style>
#panel { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
</style>
</head>
<body>
<div id="panel" style="display:none">Menu</div>
<button id="btn">Open Menu</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#btn").on("click", function() {
$("#panel").show("slide", {}, 500, function() {
$("#output").text("Opened with easing");
});
});
$("#resetBtn").on("click", function() {
$("#panel").stop(true, true).hide();
$("#output").text("");
});
</script>
</body>
</html>- Using an easing name like
"easeOutBounce"in.animate()with only jQuery core loaded, when only"swing"and"linear"are built in and the others need jQuery UI or a plugin. - Confusing easeIn with easeOut, when easeIn starts slowly and speeds up while easeOut starts fast and slows down.
- Expecting easing to change the total duration, when it only changes how the speed is distributed over the same duration.
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: