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.
jQuery examples to show the working of hide() method:
Example 1: In the below code, no parameter is used to pass to this method.
HTML
<!DOCTYPE html> <html> <head> <script src= </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>neveropen !.</p> </div> <!-- click on this button and above paragraph will disappear --> <button class="b1">Click me !</button> </body> </html> |
Output:
Example 2: In the below code, parameter is passed to this method.
HTML
<!DOCTYPE html> <html> <head> <script src= </script> <!--jQuery code to show the working of this method--> <script> $(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>neveropen.!</p> <!-- click on this button and above paragraph will hide --> <button class="btn1">Click to Hide</button> </body> </html> |
Output:
