jQuery fadeIn() and fadeOut()

fadeIn() reveals a hidden element by increasing its opacity, while fadeOut() hides a visible element by reducing opacity.

fadeIn() and fadeOut() Top ↑

$("#d1").fadeOut();
$("#d1").fadeIn();

Fade on Button Clicks Top ↑

$("#b2").on("click", function () {
    $("#d1").fadeOut();
});

$("#b1").on("click", function () {
    $("#d1").fadeIn();
});

Demo: fade in and fade out →

Set the Fade Duration Top ↑

$("#d1").fadeIn("fast");
$("#d1").fadeOut(800);

Demo: fade with slow, fast and millisecond durations →

Run Code After the Fade Completes Top ↑

A completion callback runs after the animation finishes. This is preferable to guessing the end time with a separate timer.

$("#d1").fadeOut(400, function () {
    alert("Fade-out complete");
});

Demo: fade effect followed by an alert →

← Previous: toggle() · jQuery Effects · Next: fadeToggle() →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: