jQuery Fade Effects

Fading effects change only the opacity of an element (unlike .show()/.hide(), which also animate dimensions). This makes fades ideal for overlays, notifications, and image galleries where you want a smooth visual transition without layout shifts.

Core Fade Methods

.fadeIn() animates opacity from 0 to 1 and sets display back to the element's default if it was hidden. .fadeOut() animates opacity to 0 then sets display: none. .fadeToggle() flips between the two states.

Fade To a Specific Opacity

.fadeTo(duration, opacity) is the most precise fade method — it animates to any opacity value between 0 and 1 without hiding the element, so it stays in the document flow even at zero opacity.

.fadeIn('slow') — fade from invisible to fully visible
.fadeOut(300) — fade out over 300 ms then hide
.fadeToggle() — flip fade state
.fadeTo(500, 0.5) — animate to 50% opacity

Stack fades with jQuery's queue system — calls chain automatically so .fadeOut().fadeIn() plays sequentially without nesting callbacks.

Example

// Fade a notification in then out after 3 s
$('#notification')
    .fadeIn(400)
    .delay(3000)
    .fadeOut(600, function () {
        $(this).remove();
    });

// Fade toggle on button click
$('#toggle-btn').on('click', function () {
    $('#image-overlay').fadeToggle('fast');
});

// Fade to specific opacity
$('#dimmer').fadeTo(800, 0.4);

// Image cross-fade
$('#old-img').fadeOut(500, function () {
    $('#new-img').fadeIn(500);
});

JAVASCRIPT

Full Editor

Pro Tip

Use .fadeTo() instead of .fadeOut() when you want to dim an element but keep it in the document flow.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned