Updated June 30, 2023
Introduction to jQuery hide()
jQuery incorporates the feature to hide the selected html element easily and quickly. The hide () method is one of the jQuery functions to remove the selected element(s), child elements, associated events, and data. In other way, it removes a callback or list of callbacks from a callback list. When you execute this method, it can filter and remove specific data associated with the selected elements.
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 of how long the hiding process will execute. | 400 ms | Number/String | 1.0 |
| Callback/Complete | Once the hide() method is complete, assign a function name or definition to execute. | NA | Function() | 1.0 |
| Step | Use these to change the value of a tween object’s property before setting it. | 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 | You can assign various CSS properties along with their corresponding Easing values using this function. | NA | Object | 1.4 |
| Always | Sets a function to execute on completion or cancellation of the hiding process. | NA | Function() | 1.8 |
| Start | The program schedules the execution of a function before beginning the hiding process. | NA | Function() | 1.8 |
| Progress | Each matched element will undergo the process. | NA | Function() | 1.8 |
| Fail | This feature allows you to specify a function that will run if the process fails. | NA | Function() | 1.8 |
| Done | Establish a function to execute once the hiding effect of the selected element is complete. | NA | Function() | 1.8 |
Examples of jQuery hide()
Given below are examples of jQuery hide():
Example #1 – Without Using any parameter (with default values).
You can execute the hide() method without providing any input arguments. 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 the hide() method is called:
After the 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. Use “slow” or “fast” as keywords to represent 200 and 600 milliseconds, respectively. You can use any number 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 the hide() method is called:
After the hide() method is called:
Animation quickly hides the span element, with each animation completing in only 200 milliseconds. The animation on each element will complete sequentially.
Example #3 – With ‘easing’ parameter
The easing parameter regulates the speed of the hiding process at a different instances of time. To set the hiding speed, the process is slower at the beginning and the end and faster in the middle; the “Swing” keyword is used as the parameter value. We utilize the keyword “Linear” to ensure a consistent speed throughout 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(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 the class attribute.
The method hide() is supported by html class attribute. You can call the method on any class attribute using the 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. Adding attractive animation effects using this method can significantly enhance the effectiveness of any website. You can use this method with text, images, links, and other elements.
Additional Note:
- This method is equivalent to .css(“display,” “none”).
- If you provide a duration, easing parameter, or a “complete” function, the hide() method can work as an animation method. The .hide() method simultaneously animates the matched elements’ width, height, and opacity.
- 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 the 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 of implementing jQuery hide(). You may also have a look at the following articles to learn more –
