HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeIn one by one</title>
  <style>
    body { font-family: sans-serif; padding: 16px; }
    span { color: red; cursor: pointer; }
   div { margin: 3px; width: 80px; display: none; height: 80px; float: left; }
    #one { background: #f00; }
    #two { background: #0f0; }
    #three { background: #00f; }
    #hint { clear: both; padding-top: 100px; color: #64748b; }
  </style>
</head>
<body>
  <span id="trigger">Click here...</span>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <p id="hint">Each click fades in the next hidden box.</p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("#trigger").on("click", function () {
      $("div:hidden").first().fadeIn("slow");
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .fadeIn() — one hidden div at a time (Try It)