How to use hide() method in jQuery ?
Last Updated :
12 Aug, 2024
The hide() method in jQuery is used for hiding the selected web elements. In this article, we will discuss the hide() method in detail. This method is generally used for effects or animation in jQuery. It also allows us to animate the behavior (transition) of hiding any specific element.
Syntax:
.hide( duration, easing, complete )
Parameters: This method has the following parameters:
- duration: It will determine how long any animation will run. It could be a String or Number. The possible values are "fast", "slow", or the time in milliseconds. The default value is 400 (in ms).
- easing: It will determine which easing function is being used for the transition of the element. The possible values are "swing" and "linear". The default value is "swing".
- complete: This function is called when the animation is completed. This function will be called each time per selected web element.
Note: If we don't use any of the parameters, the element will just hide without any special transition or effect. We don't have to use each parameter every time, we can use any one of these for our convenience.
Now let's talk about how we can use this method to make things easy. We can use it to hide the selected element on a button click, on hover, and click on the element itself and we can also set a timer so that after the delay, the selected element will be hidden.
Let us see some examples of the hide() method for a better understanding of its working.
CDN link: The following jQuery library file is used in all the codes for its working which is included in the <head> section of each HTML code.
https://code.jquery.com/jquery-3.6.0.min.js
Example 1: In this example, we will set the hide() method to a button, so that when the button gets clicked, the selected element will be hidden. The elements could be an image, div, h1, etc.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link. -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(24, 24, 24);
height: 100vh;
}
button {
margin: 50px;
height: 50px;
width: 100px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1><b>GeeksforGeeks</b></h1>
<button id="btn">Hide</button>
</div>
<!-- Using hide() method to hide <h1/> element. -->
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("h1").hide();
});
});
</script>
</body>
</html>
Output:
Example 2: In the following example, if we hover over the selected element it will hide. Use this code snippet and replace the code in the <body> tag of Example 1 to get this result.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link. -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(24, 24, 24);
height: 100vh;
}
button {
margin: 50px;
height: 50px;
width: 100px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1><b>GeeksforGeeks</b></h1>
</div>
<!-- Using hide() method to hide <h1/> element. -->
<script>
$(document).ready(function () {
$("h1").hover(function () {
$("h1").hide();
});
});
</script>
</body>
</html>
Output:
Example 3: For this example, we will set a timer of 2 seconds, after passing that time the selected element will be hidden whenever we click the hide button. Use this code snippet and replace the code inside the <body> tag of example 1 to get this result.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link. -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(24, 24, 24);
height: 100vh;
}
button {
margin: 50px;
height: 50px;
width: 100px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1><b>GeeksforGeeks</b></h1>
<button id="btn">Hide</button>
</div>
<!-- Using hide() method to hide <h1/> element. -->
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("h1").delay(2000).hide("fast");
});
});
</script>
</body>
</html>
Output:
Example 4: In this example, we will use the duration parameter and apply slow and fast hiding transitions of the selected element. We have two text elements and two buttons, one will hide the text slowly and the second one will hide the text instantly. Use this code snippet in Example 1.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link. -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(24, 24, 24);
height: 100vh;
}
button {
margin: 50px;
height: 50px;
width: 100px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1><b>GeeksforGeeks</b></h1>
<button id="btn">Slow hide</button>
<h2><b>GeeksforGeeks</b></h2>
<button id="btn1">Fast hide</button>
</div>
<!-- Using hide() method to hide <h1/> element. -->
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("h1").hide("slow");
});
$("#btn1").click(function () {
$("h2").hide("fast");
});
}
);
</script>
</body>
</html>
Output:
Example 5: For this example, we will see how we can use the callback function so that when the hiding effect will complete, the function will be called. We will set an alert message after the completion of the hiding effect. Use this code snippet in Example 1.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery CDN link. -->
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js"
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgb(24, 24, 24);
height: 100vh;
}
button {
margin: 50px;
height: 50px;
width: 100px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div class="container">
<h1><b>GeeksforGeeks</b></h1>
<button id="btn">Slow hide</button>
</div>
<!-- Using hide() method to hide <h1/> element. -->
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("h1").hide("slow", function () {
alert('The text is hidden!')
});
});
}
);
</script>
</body>
</html>
Output:
Similar Reads
How to use toggle() method in jQuery ?
The toggle() method is used to oscillate between the properties of CSS while used to produce the animation effect to the elements. The various jQuery effects are hide(), fade(), and slide(). Basically, the toggle() method oscillates between the CSS property display: none if it is present else it get
1 min read
jQuery hide() Method
The jQuery hide() method is used to hide selected HTML elements with a smooth animation effect. It reduces the element’s height to zero, effectively making it invisible. The method can also take a duration parameter to control the speed of the hiding animation.Syntax:$(element_selector).hide(duratio
3 min read
How to use hide() method on button click using jQuery ?
jQuery has a lot of handy methods to get the work done easily. In this article, we will discuss one of them which is the hide() method. We can use this method for various purposes on our webpage and get an efficient result. The very first step will be creating an HTML file and link the jQuery librar
2 min read
jQuery fadeIn() Method
The fadeIn() method in jQuery is used to change the opacity of selected elements from hidden to visible. The hidden elements will not be display. Syntax: $(selector).fadeIn( speed, easing, callback ) Parameters: This method accepts three parameters as mentioned above and described below: Speed: It i
2 min read
jQuery UI Button option() Method
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Button option() method is used to set or return the value currently associated with the specified element. Syntax: opti
2 min read
jQuery mouseup() Method
The jQuery mouseup() method is an inbuilt method which works when mouse left button is released over a selected element. Syntax: $(selector).mouseup(parameter) Parameters: This method accepts single parameter function which is optional. This parameter is used to specify the function to run when the
2 min read
How to show/hide an element using jQuery ?
We are given an element and the task is to to show/hide the element using jQuery. Below are the approaches to show/hide an element using jQuery:Table of ContentUsing css() methodsUsing show methodUsing Toggle methodApproach 1: Using css() methodsIt takes two parameters where the first parameter is t
3 min read
How to hide the checkbox based on value in jQuery?
The checkbox is used to set the content according to the user which he wants to see at the interface. Users also can set multiple choices according to their wishes.Syntax:$('input[name=foo]').attr('checked', false);ApproachIntegrate jQuery in HTML file via CDN Links. Includes the necessary title. Ad
2 min read
How to disable a jQuery UI menu?
In this article we will disable a jQuery UI menu Syntax: $(".selector").menu( "disable" );Learn more about selectors and menu options in jQuery. Approach: First, add jQuery UI scripts needed for your project. <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel =
1 min read
jQuery Mobile Loader hide() Method
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Loader hide() method to hide the loader widget. Syntax: $( ".selector" ).loader( "hide" );$.mobile.loading( 'hid
1 min read