🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

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:

Example
$("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.