jQuery | hide() with Examples
The hide() is an inbuilt method in jQuery used to hide the selected element.
Syntax:
$(selector).hide(duration, easing, call_function);
Here selector is the selected element.
Parameter: It accepts three parameters which are specified below-
- duration: It specifies the speed of the hide effect.
- easing: It specifies the speed of the element at different point of animation.
- call_function: This is call back function to be executed after hide operation.
Return Value: It does not return any value.
Code #1:
In the below code, no parameter is used to pass to this method.
< html > < head > </ script > <!-- jQuery code to show the working of this method --> < script > $(document).ready(function() { $(".b1").click(function() { $("p").hide(); }); }); </ script > < style > div { width: 50%; height: 80px; padding: 20px; margin: 10px; border: 2px solid green; font-size: 30px; } .b1 { margin: 10px; } </ style > </ head > < body > < div > < p >GeeksforGeeks !.</ p > </ div > <!-- click on this button and above paragraph will disappear --> < button class = "b1" >Click me !</ button > </ body > </ html > |
Output:
Before clicking on “Click me!” button-
After clicking on “Click me!” button-
Code #2:
In the below code, parameter is passed to this method.
< html > < head > < script </ script > < script > <!-- jQuery code to show the working of this method --> $(document).ready(function() { $(".btn1").click(function() { $("p").hide(1000, function() { alert("Hide() method has finished its working!"); }); }); }); </ script > < style > p { width: 40%; padding: 20px; height: 50px; border: 2px solid green; } </ style > </ head > < body > < p >GeeksforGeeks.!</ p > <!-- click on this button and above paragraph will hide --> < button class = "btn1" >Click to Hide</ button > </ body > </ html > |
Output:
Before clicking on the “Click to Hide” button-
After clicking on the “Click to Hide” button-