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.


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

$("#btn").click(function() {

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

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

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

$("button#btn").click(function() {
$("div#demo").hide("slow", function() {
alert( "Animation complete." ););

Output of the above code

Demo Box

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

Read more articles

General Knowledge

Learn Popular Language