jQuery fadeTo()

fadeTo() animates a matched element to a target opacity. The opacity value ranges from 0 (transparent) to 1 (fully opaque).

fadeTo() Syntax Top ↑

$(selector).fadeTo(duration, opacity);

Fade to 50% Opacity Top ↑

$("#b2").on("click", function () {
    $("#d1").fadeTo("fast", 0.5);
});

Restore Full Opacity Top ↑

$("#b2").on("click", function () {
    $("#d1").fadeTo("fast", 1);
});

Demo: change and restore opacity with fadeTo() →

Use a Different Duration Top ↑

$("#d1").fadeTo("slow", 0.3);

The original collection also demonstrates fade durations on the fadeIn()/fadeOut() speed demo.

← Previous: fadeToggle() · jQuery Effects · Next: slideUp() / slideDown() →

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: