Fading Effects

fadeIn gradually makes a hidden element visible.

In this page:

fadeIn()
fadeOut()
fadeToggle()
fadeTo()
Fade Speed

Syntax

javascript

$(selector).fadeIn(speed, callback);
$(selector).fadeOut(speed, callback);
$(selector).fadeToggle(speed, callback);
$(selector).fadeTo(speed, opacity, callback);

fadeIn()

fadeIn() reveals a hidden element by animating its opacity from 0 up to 1 over a chosen duration. It only affects transparency, so the element's size and position stay fixed throughout the animation.

Example: fadeIn()

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="box" style="display:none">Fading in</div>
    <button id="btn">Fade In</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#output").text("Fading in...");
        $("#box").fadeIn(1000, function() {
          $("#output").text("Fade in complete");
        });
      });
      $("#resetBtn").on("click", function() {
        $("#box").stop(true, true).hide();
        $("#output").text("");
      });
    </script>
  </body>
</html>

fadeOut()

fadeOut() runs the opposite animation, gradually reducing an element's opacity down to 0 and then setting display:none once the fade completes, removing it from layout. Because the element is set to display:none afterward, it's completely removed from the page's layout flow, not just invisible.

Example: fadeOut()

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="box">Fading out</div>
    <button id="btn">Fade Out</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#output").text("Fading out...");
        $("#box").fadeOut(1000, function() {
          $("#output").text("Fade out complete");
        });
      });
      $("#resetBtn").on("click", function() {
        $("#box").stop(true, true).show();
        $("#output").text("");
      });
    </script>
  </body>
</html>

fadeToggle()

fadeToggle() checks whether an element is currently visible or faded out and animates it to the opposite state, giving you a single call that works for both directions. This is a convenient shortcut when you don't want to track an element's current visibility state yourself before deciding which method to call.

Example: fadeToggle()

javascript

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
    #box { background: steelblue; color: #1a1a1a; padding: 10px; border-radius: 4px; }
    </style>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="box">Toggle fade</div>
    <button id="btn">Fade</button>
    <div id="output"></div>

  </section>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#btn").on("click", function() {
        $("#box").fadeToggle(function() {
          $("#output").text($(this).is(":visible") ? "Box faded in" : "Box faded out");
        });
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

fadeTo()

fadeTo() animates an element to a specific opacity value you choose, like 0.5, rather than always going fully to 0 or 1 -- useful for a dimmed or semi-transparent effect. This gives you finer control than a simple fade in or out, useful for creating a dimmed overlay or a subtle hover effect.

Example: fadeTo()

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="box">Dimmed content</div>
    <button id="btn">Fade To 0.5</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#box").fadeTo(1000, 0.5, function() {
          $("#output").text("Opacity is now " + $(this).css("opacity"));
        });
      });
      $("#resetBtn").on("click", function() {
        $("#box").stop(true).css("opacity", 1);
        $("#output").text("");
      });
    </script>
  </body>
</html>

Fade Speed

Every fading method accepts a duration argument -- either milliseconds or a keyword like slow or fast -- controlling how long the opacity transition takes to complete. You can also pass a callback function as a second argument, which runs automatically once the fade animation finishes.

Example: Fade Speed

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
      <style>
      #box { background: steelblue; color: white; padding: 10px; border-radius: 4px; }
    </style>
  </head>
  <body>
    <div id="box">Content</div>
    <button id="btn">Fade Out</button>
    <button id="resetBtn">Reset</button>
    <div id="output"></div>
    <script>
      $("#btn").on("click", function() {
        $("#box").fadeOut("slow", function() {
          $("#output").text("Fade complete");
        });
      });
      $("#resetBtn").on("click", function() {
        $("#box").stop(true, true).show();
        $("#output").text("");
      });
    </script>
  </body>
</html>

Chapter Quiz — Complete all 9 topics to unlock

0/9 topics done

Complete these topics first:

← Previous Lesson Showing and Hiding Elements Next Lesson → Sliding Effects

Fading Effects

fadeIn()

fadeOut()

fadeToggle()

fadeTo()

Fade Speed

Chapter Quiz — Complete all 9 topics to unlock

Login to run this code