HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeTo quiz demo</title>
  <style>
    body { font-family: sans-serif; padding: 16px; min-height: 80px; }
    p, div.opt {
      width: 80px;
      height: 40px;
      margin: 0;
      position: absolute;
      padding-top: 8px;
      text-align: center;
      font-size: 13px;
    }
    p { background: #fcc; }
    div.opt { background: blue; color: #fff; cursor: pointer; }
  </style>
</head>
<body>
  <p id="l0">Wrong</p><div class="opt" id="d0" style="top:0;left:0"></div>
  <p id="l1">Wrong</p><div class="opt" id="d1" style="top:0;left:90px"></div>
  <p id="l2">Right!</p><div class="opt" id="d2" style="top:0;left:180px"></div>
  <p style="position:static;margin-top:60px;color:#64748b;max-width:20rem">Click a blue box. Wrong answers fade; the label above gets bold italic.</p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("div.opt").on("click", function () {
      $(this).fadeTo(250, 0.25, function () {
        $(this).css("cursor", "").prev().css({
          "font-weight": "bolder",
          "font-style": "italic"
        });
      });
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .fadeTo() — quiz reveal callback (Try It)