jQuery hide() Effect

The jQuery hide() effect is used to hide each of the selected elements. This is similar to 'display:none' css style.

Syntax of hide() Effect

$(selector).hide(speed, callback) 

The selector is the element which to be hidden. Both speed and callback parameters are optional. The speed parameter specifies either in milliseconds or a few predefined strings, slow and fast. The callback function is called after the element is completely hidden.

Example

<p id="demo" class="cls txt"> Hello World!</p>
<button id="btn">Hide Text</button>

<script>
$(document).ready(function(){
$("#btn").click(function() {
$("#demo").hide();
});
});
</script>

Output of the above code

Hello World!

In the above example, when the user click on the 'Hide Text' button, the paragraph of 'demo' id get hidden.

Example - hide() with time and callback function

<style>
.demobox { 
width: 200px; 
height: 150px; 
background-color: pink;
border: 2px solid black;
padding: 20px;
}
</style>

<div id="demo" class="demobox"> Demo Box</div>
<br/>
<button id="btn">Hide Box</button>

<script>
$(document).ready(function(){ 
$("button#btn").click(function() {
$("div#demo").hide("slow", function() {
alert( "Animation complete." ););
});
});	
});
</script>

Output of the above code

In the above example, when the user click on the 'Hide Box' button, the div box of 'demo' id get hidden.