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