jQuery hide() Method – hide elements in a web page

jQuery hide() Method – hide elements in a web page

The jQuery Hide method is used to hide one or more elements in your web page. This is similar to the CSS property display:none.

Syntax of jQuery Hide – .hide()

$(selector).hide(speed, easing, callback)
Parameter Description

Optional. Specifies the speed of the hide effect. It can have values:

– In milliseconds eg “200”, “300”, “1000”, etc.

– “slow”

– “fast”


Optional. Easing creates animated effect while hiding an element. It defines the speed of the element in different points of the animation. The default value is “swing”.

Easing values can be:

– “swing” – slower at the beginning & end. Faster in the middle.

– “linear” – constant speed.

callback Optional. A function that executes after the .hide() method completes.

.hide() example: Hiding a div

See the below html code:

<div id="div1">
    Hello, How are you ?

To hide the div, the jQuery code will be:


.hide() example: Hiding a div with Callback function

Now I will hide the div by passing the callback function. This function will be called when the hide process is completed.

<div id="div2">
    Hello, How are you ?

So when the hide process gets completed then an alert box is shown.

$("#div2").hide(function () {
    alert("Hide method is completed!");

.hide() example: Hiding a div with ‘slow’ speed, ‘linear’ easing and ‘callback’ Method

Now in this example I will use all the 3 parameters of the jQuery hide method.

<div id="div3">
    Hello, How are you ?

The below .hide() code will do the hiding process in slow & linear manner then a callback function will be called after the hiding process is completed.

$("#div3").hide("slow", "linear", function () {
    alert("Hide method is completed!");

Download source code:



  • linkedin
  • reddit


I hope you enjoyed reading this tutorial. If it helped you then consider buying a cup of coffee for me. This will help me in writing more such good tutorials for the readers. Thank you. Buy Me A Coffee donate

Leave a Reply

Your email address will not be published. Required fields are marked *