jQuery hide() method is used to hide the selected element. It acts like the display: none property of CSS and removes the selected element from the document.
Syntax:
$(element_selector).hide(duration, easing, call_function);
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 points of animation.
- call_function: This is the call-back function to be executed after the hide operation.
Return Value: It does not return any value.
Example 1: In the below code, the hide() method is used without passing any parameter to it.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< 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 >
< button class = "b1" >Click me !</ button >
</ body >
</ html >
|
Output:Â
Example 2: In the below example, the hide() method is used with the parameters to hide the selected element.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< 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 >GeeksforGeeks.!</ p >
< button class = "btn1" >Click to Hide</ button >
</ body >
</ html >
|
Output:Â
Last Updated :
14 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...