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

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.