Reduce Motion Habit

Reduce Motion Habit: free step-by-step lesson with examples, common mistakes, and interview tips — part of jQuery Tutorial on Toolliyo Academy.

8 min read Updated 8/23/2026

On this page

jQuery Tutorial · Lesson 39 of 100

Reduce Motion Habit

Setup & DOM ✓ → Events Effects AJAX → Perf & Integrate → Ship & Projects

Events Effects AJAX · 2 — Interact · ~6 min · Effects

What is this?

Some users enable prefers-reduced-motion. Detect it and skip or shorten animations so QueryVerse stays usable during vestibular sensitivity or simply preference.

Why should you care?

Inclusive enterprise UIs in India must respect OS accessibility settings on shared ops machines.

See it live — copy this example

Examples include the jQuery 3.7 CDN. Paste into an HTML file or use Run Example to preview.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <p id="pref" class="muted"></p>
  <button type="button" id="go">Notify</button>
  <div id="banner" class="box" style="display:none">New assignment</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  $('#pref').text('prefers-reduced-motion: ' + reduce);
  $('#go').on('click', function () {
    if (reduce) {
      $('#banner').show();
    } else {
      $('#banner').stop(true, true).slideDown(200);
    }
  });
});
</script>
</body>
</html>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>QueryVerse</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.25rem; }
    .box { padding: .75rem; border: 1px solid #ccc; border-radius: 8px; margin: .5rem 0; }
    .muted { color: #666; }
    button { margin-right: .35rem; margin-top: .35rem; }
    input, select, textarea { margin: .25rem 0; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ddd; padding: .4rem .55rem; text-align: left; }
    .hidden { display: none; }
    .row-odd { background: #f7f7f7; }
    .active { font-weight: 700; }
    .toast { background: #111; color: #fff; padding: .5rem .75rem; border-radius: 6px; }
  </style>
</head>
<body>
  <p id="pref" class="muted"></p>
  <button type="button" id="go">Notify</button>
  <div id="banner" class="box" style="display:none">New assignment</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  $('#pref').text('prefers-reduced-motion: ' + reduce);
  $('#go').on('click', function () {
    if (reduce) {
      $('#banner').show();
    } else {
      $('#banner').stop(true, true).slideDown(200);
    }
  });
});
</script>
</body>
</html>

Result