jQuery Fade Effects
Respect reduced motion and do not use animation duration as a guess for when work has finished.
How it works
fadeIn, fadeOut and fadeToggle coordinate opacity and display. They are presentation effects, not data-loading operations. This example reveals a static collection notice and reports completion through the effect callback. The duration becomes zero when reduced motion is requested. That preserves the result while removing unnecessary motion. The action is small and does not depend on an exact millisecond schedule or a manually chosen timeout.
Run in a separate local browser lab
Save this complete HTML source as index.html in an empty folder. Put the pinned full jQuery 4.0.0 file beside it and preserve the MIT licence notice. The document includes its own CSS and JavaScript. Bhylu’s shared website theme does not load jQuery globally.
Open index.html directly in a normal browser. You may also use the optional loopback fixture server with Node 22 if you want the same HTTP setup as the network lessons.
jQuery examples do not run in Bhylu’s current playground: it blocks external libraries and network access. No Apache, MySQL or website configuration change is needed. Review the full-build setup before using Ajax, effects or plugins.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Fade a Notice With a Defined Completion State</title>
<style>
:root {
font:
18px/1.6 system-ui,
sans-serif;
color: #16304e;
background: #fff;
color-scheme: light;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
main {
max-width: 50rem;
margin: auto;
padding: 1.25rem;
}
h1 {
font-size: 1.8rem;
line-height: 1.2;
}
h2 {
font-size: 1.3rem;
}
button,
input,
select,
textarea {
font: inherit;
max-width: 100%;
}
button {
margin: 0.2rem;
padding: 0.4rem 0.7rem;
background: #034fa0;
color: white;
border: 1px solid #034fa0;
border-radius: 0.3rem;
}
button:disabled {
opacity: 0.6;
}
label {
display: block;
margin: 0.5rem 0;
}
input:not([type='checkbox']),
select,
textarea {
display: block;
padding: 0.3rem;
}
a {
color: #034fa0;
}
output {
display: block;
}
article,
section,
fieldset {
padding: 0.75rem;
margin-block: 0.75rem;
border: 1px solid #a9bcd1;
}
ul {
padding-left: 1.5rem;
}
:focus-visible {
outline: 3px solid #0078d4;
outline-offset: 3px;
}
.chosen {
border: 3px solid #0078d4;
}
.highlight {
font-weight: 700;
}
.muted {
opacity: 0.7;
}
pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
:root[data-theme='dark'] {
color: #d6e7fb;
background: #061d30;
color-scheme: dark;
}
:root[data-theme='dark'] a {
color: #8ecbff;
}
</style>
</head>
<body>
<main>
<h1>Neighbourhood book swap</h1>
<button id="show">Reveal notice</button>
<p id="notice" style="display: none">Bring a reusable bag.</p>
<output></output>
</main>
<script src="jquery.min.js"></script>
<script>
jQuery(function ($) {
const duration = matchMedia('(prefers-reduced-motion: reduce)').matches
? 0
: 100;
$('#show').on('click', function () {
$('#notice')
.stop(true, true)
.fadeIn(duration, function () {
$('output').text('Notice visible');
});
});
});
</script>
</body>
</html>
Expected result
The notice becomes visible and the completion message appears in either motion preference.
The stop call prevents repeated clicks from building a long queue before this simple reveal. In a larger interaction, define whether stopping should jump to an endpoint or retain the intermediate value. A callback can run once per matched element, so a multi-element effect may need collection-level completion rather than treating the first callback as proof that every element finished.
Use jQuery’s official API documentation for exact method and return contracts.