Code has been added to clipboard!

How to Use jQuery .fadeTo() Method to Set and Animate Opacity

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

jQuery fadeTo: Main Tips

  • The method .fadeTo() animates the element to the specified opacity.
  • You can also use it to make jQuery set opacity as a CSS property.

jQuery .fadeTo() Method

The jQuery .fadeTo() method modifies the opacity of the chosen element to a specified level. In the example below, the opacity is set to 0.8, which represents 80 percent:

$("a").hover(() => {
    $("div").fadeTo(2000, 0.8);

For jQuery .fadeTo(), the syntax is as follows:

$("selector").fadeTo(length, opacity, easing, callback);

This method takes three arguments:

  • length - a number of milliseconds the animation lasts (400 by default). Keywords slow and fast may also be used for 600 and 200 ms, respectively.
  • opacity - the level of jQuery opacity you need for the element (0-1).
  • easing - a keyword value describing whether the animation speed is linear (linear), or speeds up as it goes (swing - the default value).
  • callback - the function to run once the animation ends.

Note: by defining the length as 0, you will simply make jQuery set opacity as a CSS property.