jQuery Fade

jQuery Effects - Fading

Effortlessly create fade-in and fade-out effects for HTML elements using jQuery’s fading methods.

Try the buttons below to see fadeIn(), fadeOut(), fadeToggle(), and fadeTo() in action.

jQuery simplifies the implementation of common fading animations. While modern CSS transitions on the `opacity` property offer a performant alternative, jQuery's methods provide a quick and compatible way to achieve these effects.

jQuery Fading Methods

jQuery offers several methods to animate the opacity of elements:

• fadeIn(): Gradually increases the opacity of hidden elements from 0 to 1, making them visible.
• fadeOut(): Gradually decreases the opacity of visible elements from 1 to 0, hiding them (also sets display: none at the end).
• fadeToggle(): Toggles between fadeIn() and fadeOut().
• fadeTo(): Animates the opacity of elements to a specific value (between 0 and 1) without changing their display property.

jQuery fadeIn() Method

Use fadeIn() to smoothly reveal hidden elements.

Syntax:

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

Parameters duration and complete function similarly to hide() and show() (milliseconds, ‘slow’, ‘fast’, optional callback).

Example:

// Assumes #div1, #div2, #div3 start hidden (e.g., style="display: none;")
$('#fadeInButton').on('click', () => {
  // Fade in instantly (default duration)
  $('#div1').fadeIn();
  // Fade in slowly
  $('#div2').fadeIn('slow');
  // Fade in over 3 seconds
  $('#div3').fadeIn(3000);
});

jQuery fadeOut() Method

Use fadeOut() to smoothly hide visible elements.

Syntax:

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

Parameters are the same as fadeIn().

Example:

$('#fadeOutButton').on('click', () => {
  // Fade out instantly
  $('#div1').fadeOut();
  // Fade out slowly
  $('#div2').fadeOut('slow');
  // Fade out over 3 seconds, then alert
  $('#div3').fadeOut(3000, () => {
    alert('Div 3 faded out!');
  });
});

jQuery fadeToggle() Method

fadeToggle() conveniently switches between fadeIn() and fadeOut() based on the element’s current visibility.

Syntax:

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

Parameters are the same.

Example:

$('#fadeToggleButton').on('click', () => {
  // Toggle fade instantly
  $('#div1').fadeToggle();
  // Toggle fade slowly
  $('#div2').fadeToggle('slow');
  // Toggle fade over 3 seconds
  $('#div3').fadeToggle(3000);
});

jQuery fadeTo() Method

fadeTo() allows you to animate an element’s opacity to a specific level without hiding it (i.e., it doesn’t change the display property).

Syntax:

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

Required Parameters:

• duration: Animation speed (milliseconds, ‘slow’, ‘fast’).
• opacity: A number between 0 (completely transparent) and 1 (fully opaque) to fade to.

Optional complete callback parameter is also available.

Example:

$('#fadeToButton').on('click', () => {
  // Fade to 15% opacity slowly
  $('#div1').fadeTo('slow', 0.15);
  // Fade to 40% opacity slowly
  $('#div2').fadeTo('slow', 0.4);
  // Fade to 70% opacity slowly
  $('#div3').fadeTo('slow', 0.7);
});

Modern Alternatives & Considerations

Fading effects are prime candidates for CSS transitions. Changing the opacity property with a CSS transition rule is often smoother and more performant.

CSS Example:

/* CSS */
.fadeable {
  opacity: 1;
  transition: opacity 0.5s ease-in-out; /* 500ms transition */
}

.fadeable.faded-out {
  opacity: 0;
}

// JavaScript (using jQuery for class toggling)
$('#cssFadeButton').on('click', () => {
  $('.fadeable').toggleClass('faded-out');
});

Choose jQuery fading methods when you need the simplicity of its syntax, require compatibility with older browsers, or are already heavily using jQuery for animations.

jQuery Effects Reference

Explore the official jQuery documentation for detailed information on all effect methods and their options.