HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeIn censored overlay</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 28rem; }
    p { position: relative; width: 100%; min-height: 90px; }
    .overlay {
      position: absolute;
      width: 100%;
      height: 65px;
      font-size: 28px;
      text-align: center;
      color: yellow;
      background: red;
      padding-top: 25px;
      top: 0;
      left: 0;
      display: none;
    }
    .overlay span { display: none; }
    a { color: #2563eb; }
  </style>
</head>
<body>
  <p>
    Let it be known that the party of the first part
    and the party of the second part are henceforth
    directed to assess the allegations... (<a href="#">click!</a>)
    <div class="overlay">CENSORED! <span>!!!</span></div>
  </p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $("a").on("click", function () {
      $(".overlay").fadeIn(3000, function () {
        $(".overlay span").fadeIn(100);
      });
      return false;
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .fadeIn() — CENSORED overlay callback (Try It)