jQuery fadeToggle()

fadeToggle() alternates between fadeIn() and fadeOut() based on the element's current visibility.

fadeToggle() Syntax Top ↑

$("#d1").fadeToggle();

Use fadeToggle() on Click Top ↑

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

Demo: fadeToggle() →

Add a Duration Top ↑

$("#d1").fadeToggle("slow");
$("#d1").fadeToggle(500);

Demo: fadeToggle() with different durations →

Use fadeTo() when the goal is a specific opacity rather than simply visible or hidden.

← Previous: fadeIn() / fadeOut() · jQuery Effects · Next: fadeTo() →

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: