jQuery | fadeTo() with Examples - Tutorialspoint.dev

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 src="https://code.jquery.com/jquery-1.10.2.js"> 
    </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-

br>

After clicking on the first and second paragraph-

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

<html> 
  
<head> 
    <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </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-

jQuery | fadeTo() with Examples

tags:

You Might Also Like

leave a comment

0 Comments

Subscribe to Our Newsletter

Top Followed books