Black friday

Save big!

All courses under $5 - for a limited time!

Code has been added to clipboard!

Using jQuery .fadeIn() for Animating the Opacity

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

jQuery fadeIn: Main Tips

  • jQuery .fadeIn() runs a fade in animation on an HTML element.
  • It can be used on any element, such as a simple image.

Writing and Using .fadeIn()

The jQuery .fadeIn() method animates the opacity, thus creating a fade animation on the selected element.

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

Below is the syntax you would use for this method:

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

jQuery .fadeIn() takes three arguments:

  • length - a numeric value describing how many milliseconds the animation lasts (400 by default). You may also use keywords slow (600 ms) and fast (200 ms).
  • easing - a keyword value describing whether the animation speed is linear (linear), or starts off slow and speeds up (swing; default value).
  • callback - the function to execute once when the animation is complete.