jQuery Custom Animation
Choose a property and range whose visual meaning stays valid at narrow widths.
How it works
animate changes supported numeric CSS properties over time. It does not animate every CSS concept or move work off the main thread. This example grows a small decorative marker from forty to one hundred twenty CSS pixels, safely inside a narrow lab page. A text output describes the completed state. The marker is decorative rather than an invented percentage of saved work, and reduced motion skips the interpolation.
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 Animate a Bounded Numeric Property</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="grow">Expand marker</button>
<div
id="marker"
aria-hidden="true"
style="width: 40px; height: 12px; background: #0078d4"
></div>
<output></output>
</main>
<script src="jquery.min.js"></script>
<script>
jQuery(function ($) {
const duration = matchMedia('(prefers-reduced-motion: reduce)').matches
? 0
: 100;
$('#grow').on('click', function () {
$('#marker')
.stop(true, true)
.animate({ width: 120 }, duration, function () {
$('output').text('Marker width: ' + Math.round($(this).width()));
});
});
});
</script>
</body>
</html>
Expected result
The marker ends at 120 pixels and the output names that completed width.
The numeric endpoint is part of the fixture, not a responsive layout strategy. Prefer CSS transitions or animations for effects that CSS handles naturally, and reserve JavaScript coordination for a genuine behavioural need. Large layout-changing animations can trigger expensive repeated layout. Review actual devices and reduced-motion preferences rather than using a small desktop demo as a performance benchmark.
Use jQuery’s official API documentation for exact method and return contracts.