Introduction to jQuery hide()
jQuery incorporates the feature to hide the selected html element in an easy and fast way. Hide() method is one of the jQuery functions to remove the selected element(s) along with child elements, associated events, and data. In other way, it removes a callback or list of callbacks from a callback list. Its functionality is also extended to apply a filter to choose specific elements for which associated data will be removed on the execution of the method.
Syntax with Parameters
The syntax of jQuery hide() is as follows:
Syntax:
$(selector).hide([Input parameter values])Parameters:
The parameters of jQuery hide() is as follows:
| Parameter | Description | Default value | Type | Version added |
| Duration | To customize the duration about how long the hiding process will execute. | 400 ms | Number/String | 1.0 |
| Callback/Complete | Set a function definition or name, to be executed on completion of hide() method. | NA | Function() | 1.0 |
| Step | Used to modify the value of any property of the tween object before it is set. | NA | Function() | 1.0 |
| Queue | To decide about the arrangement of the animation effects in the queue. | True | String /Boolean | 1.0 |
| Easing | Used to regulate at what speed the hiding process should occur at different points of time. | Swing | String | 1.0 |
| SpecialEasing | It is used to set multiple CSS properties and their respective Easing values. | NA | Object | 1.4 |
| Always | Sets a function to execute either on completion or on cancellation of the hiding process. | NA | Function() | 1.8 |
| Start | A function is set to execute before the hiding process begins. | NA | Function() | 1.8 |
| Progress | It is set to call on the accomplishment of the process for each matched element. | NA | Function() | 1.8 |
| Fail | It is used to set a function that is executed on the failure of the process. | NA | Function() | 1.8 |
| Done | It sets a function that gets called on completion of the hiding effect for the selected element. | NA | Function() | 1.8 |
Examples of jQuery hide()
Given below are examples of jQuery hide():
Example #1 – Without Using any parameter (with default values).
The hide() method can be used without any input argument value being provided. In this case, it executes the default values.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
});
});
</script>
</head>
<body style="background-color:blanchedalmond;">
<h3 style="font-family: Arial, Helvetica, sans-serif;">'hide()' method is used without paramter</h3>
<p style="font-family: Arial, Helvetica, sans-serif;">This paragraph is coded with p element.</p>
<button class="btn1">Hide 'p' element</button>
</body>
</html>Output:
Before hide() method is called:
After hide() method is called:
Example #2 – With ‘Duration’ parameter.
The duration parameter is used with the method to regulate how long it should consume for the process to take place. The keyword “slow” or “fast” can be used that stands for 200 milliseconds and 600 milliseconds respectively. Any numeric can also be used as a duration value.
Code:
<html lang="en">
<head>
<meta charset="utf-8">
<style>
span {
padding: 3px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: larger;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body style="background-color:blanchedalmond;">
<div>
<span>This</span> <span>example</span> <span>is</span>
<span>written</span> <span>to</span> <span>hide</span>
<span>elements</span>
</div>
<br>
<br>
<button id="hider">Click here to Hide</button>
<button id="shower">Click here to Show</button>
<script>
$( "#hider" ).click(function() {
$( "span:last-child" ).hide( "fast", function() {
// Use arguments.callee so we don't need a named function
$( this ).prev().hide( "fast", arguments.callee );
});
});
$( "#shower" ).click(function() {
$( "span" ).show( 3000 );
});
</script>
</body>
</html>Output:
Before hide() method is called:
After hide() method is called:
The span element is animated to be hidden fast i.e each animation will be completed within 200 milliseconds. The animation on each element will get completed sequentially.
Example #3 – With ‘easing’ parameter
The speed of the hiding process at a different instance of time is regulated by the easing parameter. In order to set the speed of the hiding, the process is slower at the beginning and at the end, faster in the middle, the “Swing” keyword is used as the parameter value. Otherwise, to have a constant speed for throw-out the process, the key word “Linear” is used.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$("p").hide(3000,"linear");
});
});
</script>
</head>
<body style="background-color:blanchedalmond;">
<h3 style="font-family: Arial, Helvetica, sans-serif;">'hide()' method is used with 'easing' paramter</h3>
<p style="font-family: Arial, Helvetica, sans-serif;">This paragraph is designed with p element.</p>
<button class="btn">Click here to hide 'p' element</button>
</body>
</html>Output:
Before hide() method is called:
After hide() method is called:
Example #4 – With ‘callback’ parameter.
A function name or definition is provided as a callback parameter value to execute on completion of the process.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn").click(function(){
$("p").hide(function(){
alert("hide() method operation is finished!");
});
});
});
</script>
</head>
<body style="background-color:blanchedalmond;">
<h3 style="font-family: Arial, Helvetica, sans-serif;">'hide()' method is used with 'callback' paramter</h3>
<p style="font-family: Arial, Helvetica, sans-serif;">This paragraph is designed using 'p' element</p>
<button class="btn">Click here to hide 'p' element</button>
</body>
</html>Output:
Before hide() method is called:
After hide() method is called:
Example #5 – Applying hide() on class attribute.
The method hide() is supported by html class attribute. The method can be called on any class attribute by means of ID value.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").hide("slow");
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
background-color:blanchedalmond;
border: solid 1px #c3c3c3;
width: 40%;
}
#panel {
padding: 5px;
width: 40%;
height: 40px;
}
</style>
</head>
<body style="background-color:blanchedalmond;">
<div id="flip">Click here to execute hide() on panel div session</div>
<div id="panel">This div session has ID 'Panel'</div>
</body>
</html>Output:
Before hide() method is called:
After hide() method is called:
Thus hide() method supports customization in the hiding process for the matched element. The effectiveness of any website can be enhanced significantly by the use of this method by adding attractive animation effects. This method can be used with text as well as images, links, etc.
Additional Note:
- This method is equivalent to .css( “display”, “none” ).
- The method hide() functions as an animation method, when a duration, or easing parameter, or a “complete” function is provided. The .hide() method animates the width, height, and opacity of the matched elements simultaneously.
- Remove() and Hide() exhibits similar animation behavior on UI . But they differ from the internal mechanism. Hide() sets the ‘Display’ CSS property of the matched element to value ‘None’ whereas Remove() removes the matched element from DOM completely.
Recommended Articles
This is a guide to jQuery hide(). Here we discuss the introduction, syntax, and different examples to implement jQuery hide(). You may also have a look at the following articles to learn more –
8 Online Courses | 5 Hands-on Projects | 28+ Hours | Verifiable Certificate of Completion
4.5
View Course
Related Courses
