jQuery Effects - FadeTo

jQuery Effects - FadeTo: Learn about the jQuery fadeTo() method, how it works, and its example.
Submitted by Pratishtha Saxena, on September 22, 2022

jQuery fadeTo() Method

The fadeTo() method of jQuery helps to fade out the respective element to a particular level of specified opacity. Fade here means that the specified element will get lighter and lighter until it reaches the specified value of opacity. This method will not make the selected element hidden. It will just make its display fade out. This method again helps to add various similar kinds of effects on the website for the user making the webpage more interactive and dynamic.

fadeTo() Method Syntax

$(selector).fadeTo(speed, opacity);  
$(selector).fadeTo(speed, opacity, easing, callback);

The speed as a parameter here indicates the speed of the elements that get faded out. It can be specified as – slow, fast, normal, or even in milliseconds. The default value of the speed is normal. The opacity is the numerical value that ranges between 0 to 1, where 0 is the lightest (not-visible) and 1 is the darkest (visible). The easing is an optional parameter that takes – swing, linear as its values. The callback refers to the function which gets called when the fadeTo() method finishes its task.

Let's have a look at the following given example which explains the usage of the fadeTo() jQuery method very efficiently. When the button is clicked to make the content slowly fade out to a certain extinct of opacity level.

jQuery fadeTo() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Effects - FadeTo</h2>
    <p>Click the button to toggle the content on the page.</p>
    <button>Fade To</button>
    <hr>
    <h3>THIS CONTENT IS VISIBLE NOW !!!</h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function() {
        $('button').click(function() {
            $('h3').fadeTo('slow', '0.5');
        })
    });
  </script>
</html>

Output:

jQuery - Effects: FadeToggle

jQuery - Effects: SlideDown

Comments and Discussions!

Load comments ↻