jQuery Fade Effect Methods

1. 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.

1.1. 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

2. jQuery fadeIn() Method

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

2.1. Syntax

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

2.2. fadeIn() — No Duration

Instantly makes the element fully visible with no animation.

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

2.3. fadeIn() — Milliseconds

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

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

2.4. 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');

2.5. fadeIn() — Callback

Run custom code immediately after the fadeIn animation completes.

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

3. jQuery fadeOut() Method

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

3.1. Syntax

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

3.2. fadeOut() — No Duration

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

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

3.3. fadeOut() — Milliseconds

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

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

3.4. 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');

3.5. 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>');
});

4. jQuery fadeToggle() Method

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

4.1. Syntax

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

4.2. fadeToggle() — No Duration

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

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

4.3. fadeToggle() — Milliseconds

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

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

4.4. 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');

4.5. fadeToggle() — Callback

Trigger a callback function immediately after the fadeToggle animation completes.

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

5. jQuery fadeTo() Method

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

5.1. Syntax

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

5.2. 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);

5.3. 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);

5.4. 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%');
});