jQuery - fade() in jQuery

Want to make your webpage look more stylish and smooth? jQuery fade effects let you fade elements in or out instead of just hiding them instantly. It’s like adding a cool animation when something appears or disappears!

What is fade() in jQuery?

Fade effects make elements gradually appear or disappear by changing their transparency (opacity). They don’t just pop in and out—they fade smoothly.

There are four main fade methods in jQuery:

1. fadeOut()

Makes an element gradually disappear.

$("#box").fadeOut();

You can also add speed:

$("#box").fadeOut("slow");      // slow fade
$("#box").fadeOut(1000);        // fades out in 1000ms (1 second)

 2. fadeIn()

Makes a hidden element fade into view.

$("#box").fadeIn();

Add speed for smoothness:

$("#box").fadeIn("fast");

 3. fadeToggle()

Toggles between fadeIn() and fadeOut()—like a light switch with dimming!

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

 4. fadeTo()

Fades an element to a specific level of transparency (between 0 and 1).

$("#box").fadeTo(1000, 0.5);

This fades the box to 50% visible in 1 second.

 Real Example

<div id="box" style="width:100px; height:100px; background:red;"></div>
<button id="fadeBtn">Fade Out</button>

<script>
  $("#fadeBtn").click(function() {
    $("#box").fadeOut(1000); // fades out in 1 second
  });
</script>