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.
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-
leave a comment
0 Comments