jQuery Fade

❮ Previous Next ❯

jQuery Fade Effects

jQuery provides powerful tools to fade elements in and out of visibility.

Fading is an elegant way to transition content without jarring the user layout.

Search engines also digest this smoothly without penalty.

The fadeIn() and fadeOut() Methods

The fadeIn() method is used to slowly display a hidden element.

The fadeOut() method is used to slowly hide a visible element.

Just like hiding, you can specify a speed parameter like "slow", "fast", or milliseconds.

Fade In and Out Example:

$("#fade-in-btn").click(function(){
  $("#box").fadeIn("slow");
});

$("#fade-out-btn").click(function(){
  $("#box").fadeOut(2000); // Fades out over 2 seconds
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <button id="fade-out-btn">Fade Out</button>
  <button id="fade-in-btn">Fade In</button><br><br>
  <div id="box" style="width:100px;height:100px;background-color:red;"></div>
  <script>
  $(document).ready(function(){
    $("#fade-out-btn").click(function(){
      $("#box").fadeOut(1500);
    });
    $("#fade-in-btn").click(function(){
      $("#box").fadeIn("slow");
    });
  });
  </script>
</body>
</html>

The fadeToggle() Method

The fadeToggle() method intelligently switches between fading in and fading out.

If the elements are faded out, fadeToggle() will fade them in.

If the elements are faded in, fadeToggle() will fade them out.

Fade Toggle Example:

$("button").click(function(){
  $("#box").fadeToggle("fast");
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <button>Toggle Fade</button><br><br>
  <div id="box" style="width:100px;height:100px;background-color:blue;"></div>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("#box").fadeToggle("fast");
    });
  });
  </script>
</body>
</html>

The fadeTo() Method

The fadeTo() method allows fading to a specific opacity level (transparency).

Unlike the other methods, it doesn't make the element disappear completely.

The opacity value must be a number between 0.00 and 1.00.

Fade To Example:

$("button").click(function(){
  // Fades the box to 30% opacity
  $("#box").fadeTo("slow", 0.3);
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
  <button>Dim the Box</button><br><br>
  <div id="box" style="width:100px;height:100px;background-color:green;"></div>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("#box").fadeTo("slow", 0.3);
    });
  });
  </script>
</body>
</html>

Exercise 1 of 2

Which method allows you to change an element's opacity to a precise percentage without fully hiding it?

fadeTo() fadeOut() fadeOpacity()

Exercise 2 of 2

If an element is currently visible, what will calling fadeToggle() do to it?

It will stay visible. It will fade out.

❮ Previous Next ❯

jQuery Basics

jQuery Effects

jQuery HTML

jQuery Traversing

jQuery AJAX

jQuery Misc