jQuery Fade Effect Methods

jQuery Fade Effects Overview

jQuery fade effects let you animate an element’s opacity to fade it in, fade it out, toggle its visibility, or fade to a specific opacity, all with simple calls.

jQuery Fading Effect Methods

• fadeIn() – Increase opacity from 0 to 1
• fadeOut() – Decrease opacity from 1 to 0
• fadeToggle() – Toggle between fadeIn and fadeOut
• fadeTo() – Fade to a given opacity level

jQuery fadeIn() Method

The fadeIn() method smoothly makes a hidden element visible by animating its opacity to 1.

Syntax

$(selector).fadeIn(duration, callback);

fadeIn() — No Duration

Instantly makes the element fully visible with no animation.

// Show immediately
$('#panelFadeIn').fadeIn(0);

fadeIn() — Milliseconds

Fades the element in over a specified number of milliseconds for a smooth transition.

// Fade in over 500ms
$('#panelFadeIn').fadeIn(500);

fadeIn() — slow/fast

Use jQuery’s built‑in “slow” or “fast” presets to control the fade duration without specifying exact times.

// Fade in slowly
$('#panelFadeIn').fadeIn('slow');
// Fade in quickly
$('#panelFadeIn').fadeIn('fast');

fadeIn() — Callback

Run custom code immediately after the fadeIn animation completes.

// Fade in then alert
$('#panelFadeIn').fadeIn(400, function() {
  alert('Panel is visible!');
});

jQuery fadeOut() Method

The fadeOut() method gradually hides a visible element by animating its opacity to 0.

Syntax

$(selector).fadeOut(duration, callback);

fadeOut() — No Duration

Instantly hides the element by setting its opacity to zero without animation.

// Hide immediately
$('#panelFadeIn').fadeOut(0);

fadeOut() — Milliseconds

Fades the element out over a specified number of milliseconds for a gradual disappearance.

// Fade out over 600ms
$('#panelFadeIn').fadeOut(600);

fadeOut() — slow/fast

Apply the “slow” or “fast” presets to quickly configure the fadeOut duration.

// Fade out slowly
$('#panelFadeIn').fadeOut('slow');
// Fade out quickly
$('#panelFadeIn').fadeOut('fast');

fadeOut() — Callback

Execute additional logic right after the fadeOut effect finishes.

// Fade out then show message
$('#panelFadeIn').fadeOut(500, function() {
  $('#panelFadeIn').after('<p class="callback-msg">Panel hidden</p>');
});

jQuery fadeToggle() Method

The fadeToggle() method toggles the fadeIn/fadeOut state of an element based on its current visibility.

Syntax

$(selector).fadeToggle(duration, callback);

fadeToggle() — No Duration

Instantly toggles the element’s visibility without any fade animation.

// Instant toggle
$('#panelFadeIn').fadeToggle(0);

fadeToggle() — Milliseconds

Toggles the fade effect over a set number of milliseconds for a smooth in/out.

// Toggle fade over 400ms
$('#panelFadeIn').fadeToggle(400);

fadeToggle() — slow/fast

Use the “slow” or “fast” shortcuts to toggle fade without manual timing.

// Fade toggle slowly
$('#panelFadeIn').fadeToggle('slow');
// Fade toggle quickly
$('#panelFadeIn').fadeToggle('fast');

fadeToggle() — Callback

Trigger a callback function immediately after the fadeToggle animation completes.

// Toggle fade then notify
$('#panelFadeIn').fadeToggle(400, function() {
  console.log('Fade toggled');
});

jQuery fadeTo() Method

The fadeTo() method animates an element’s opacity to a specified value between 0 and 1.

Syntax

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

fadeTo() — Fade to 50%

Animate the element’s opacity to 50% over a set duration.

// Fade to 0.5 opacity over 400ms
$('#panelFadeIn').fadeTo(400, 0.5);

fadeTo() — slow/fast

Fade the element to a target opacity using the “slow” or “fast” presets.

// Fade to 0.2 slowly
$('#panelFadeIn').fadeTo('slow', 0.2);
// Fade to 0.8 quickly
$('#panelFadeIn').fadeTo('fast', 0.8);

fadeTo() — Callback

Run a callback function once the element reaches the specified opacity level.

// Fade to 0.3 then alert
$('#panelFadeIn').fadeTo(500, 0.3, function() {
  alert('Opacity set to 30%');
});