Tutorialspoint.dev

jQuery | fadeTo() with Examples

The fadeTo() is an inbuilt method in jQuery which is used to change the opacity of the selected element.
Syntax:

$(selector).fadeTo(speed, opacity, easing, call_function)

Here selector is the selected element.
Parameter: It accepts four parameters which are specified below-

  • speed: It specifies the speed of the fading effect.
  • opacity: It specifies to fade and this value should must be in between 0.0 and 1.0.
  • easing: It specifies the speed at different point of animation.
  • call_function: It is optional parameter and perform a function after performing fadeTo method.

Return Value: It does not return any value.

jQuery code to show the working of fadeTo() method:

Code #1:
In the below code, no optional function parameter is passed.

<html>
  
<head>
    </script>
    <style>
        body {
            width: 40%;
            height: 100px;
            border: 2px solid green;
            padding: 20px;
        }
    </style>
  
</head>
  
<body>
    <!-- click on this paragraph and this paragraph will fade out -->
    <p>
        This paragraph will fade out !
    </p>
    <!-- after clicking on this paragraph this paragraph will 
 not fade out -->
    <p>
        This paragraph will not fade !
    </p>
    <!-- jQuery code to show working of this method -->
    <script>
        $("p:first").click(function() {
            $(this).fadeTo("slow", 0.33);
        });
    </script>
  
</body>
  
</html>

Output:
Before clicking on any paragraph-



After clicking on the first and second paragraph-

Code #2:
In the below code, optional function parameter is passed.

<html>
  
<head>
    <script 
    </script>
    <!-- jQuery code to show the working of this method -->
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("p").fadeTo(2000, 0.2, function() {
                    alert("The fadeTo effect has finished!");
                });
            });
        });
    </script>
    <style>
        body {
            width: 40%;
            height: 100px;
            border: 2px solid green;
            padding: 20px;
        }
    </style>
</head>
  
<body>
    <!-- this paragraph will fade out -->
    <p>This is a paragraph.</p>
  
    <!-- click on this button and paragraph will fade out -->
    <button>Click me</button>
  
</body>
  
</html>

Output:
Before clicking on the “Click me” button-

After clicking on the “Click me” button-



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter