jQuery Effects
jQuery can hide, show, fade, slide and animate elements with one short line of code.
Hide, Show and Toggle
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body>
<button id="hide">Hide</button>
<button id="show">Show</button>
<button id="toggle">Toggle</button>
<p id="info">Workownix offers short IT courses in Orangi Town, Karachi.</p>
<script>
$(function () {
$("#hide").on("click", function () { $("#info").hide(); });
$("#show").on("click", function () { $("#info").show(); });
$("#toggle").on("click", function () { $("#info").toggle(500); });
});
</script>
</body>
</html>toggle() hides a visible element and shows a hidden one.
Speed
Every effect accepts a speed: "slow", "fast", or a number of milliseconds (1000 = 1 second).
Example
$("#box").hide("slow");
$("#box").show(300);The Effect Methods
| Method | What it does |
|---|---|
hide() / show() / toggle() | Hide or show the element |
fadeOut() / fadeIn() / fadeToggle() | Fade the element out or in |
fadeTo(speed, opacity) | Fade to a set opacity, like 0.4 |
slideUp() / slideDown() / slideToggle() | Roll the element up or down |
animate({...}, speed) | Animate any number-based CSS properties |
stop() | Stop the running animation |
delay(ms) | Wait before the next effect in a chain |
Fading
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<style>
.box { display: inline-block; width: 70px; height: 70px; margin: 4px; }
</style>
</head>
<body>
<button id="fade">Fade toggle</button>
<button id="half">Fade to 30%</button><br><br>
<div class="box" style="background:#0769ad"></div>
<div class="box" style="background:#f0db4f"></div>
<div class="box" style="background:#e34c26"></div>
<script>
$(function () {
$("#fade").on("click", function () { $(".box").fadeToggle(800); });
$("#half").on("click", function () { $(".box").fadeTo("slow", 0.3); });
});
</script>
</body>
</html>Sliding: an FAQ Accordion
Sliding is great for questions and answers that open on click:
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<style>
.q { background: #0769ad; color: white; padding: 10px; cursor: pointer; margin-top: 4px; }
.a { padding: 10px; background: #eef5fb; display: none; }
</style>
</head>
<body>
<div class="q">Do I need a laptop?</div>
<div class="a">A laptop helps, but you can also practise on the institute's computers.</div>
<div class="q">Are classes online?</div>
<div class="a">Yes, classes are available online and at the institute.</div>
<script>
$(function () {
$(".q").on("click", function () {
$(this).next(".a").slideToggle(300);
});
});
</script>
</body>
</html>animate()
animate() changes CSS properties smoothly. Properties must have number values (like width, left, opacity, font-size). Write names in camelCase or in quotes.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body>
<button id="go">Start delivery</button>
<div id="bike" style="position:relative;left:0;width:90px;padding:8px;background:#f0db4f;text-align:center">Rider</div>
<p id="status"></p>
<script>
$(function () {
$("#go").on("click", function () {
$("#status").text("On the way...");
$("#bike")
.animate({ left: "250px" }, 1500)
.animate({ opacity: 0.5 }, 300)
.animate({ opacity: 1 }, 300, function () {
$("#status").text("Delivered!");
});
});
});
</script>
</body>
</html>To animate colours you need an extra plugin. Moving an element with left or top only works when its CSS position is relative, absolute or fixed.
Callbacks
An effect runs in the background, so the next line does not wait for it. To run code after an effect ends, pass a callback function as the last argument:
Example
$("#popup").fadeOut(500, function () {
$("#msg").text("Popup closed");
});In the delivery example above, "Delivered!" appears only when the last animation has finished.
If a user clicks fast, animations pile up in a queue. Call stop() first, for example $("#menu").stop().slideToggle(), so only the latest click counts.
Exercise
Exercise
Which method rolls a visible element up until it is hidden?