Black friday

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

The Proper Way of Using jQuery .fadeOut() Explained

Reading time 1 min
Published Jan 15, 2018
Updated Oct 2, 2019

jQuery fadeOut: Main Tips

  • jQuery .fadeOut() runs a fade out animation on the selected element.
  • Once the animation finishes, the element is transparent.

Writing and Using .fadeOut()

The jQuery .fadeOut() method animates the opacity of the selected element, thus creating a fade out animation.

Example
$("a").hover(() => {
    $("div").fadeOut();
});

Here is the syntax you would use for this method:

$("selector").fadeOut(length, easing, callback);

.fadeOut() jQuery method takes three arguments:

  • length describes the duration of the animation in milliseconds (400 by default), or using keywords slow (600 ms) and fast (200 ms).
  • easing defines if the animation speed is linear (linear), or starts off slow and speeds up (swing - the default value).
  • callback names a function to call once the animation finishes.