hide() method in jquery

hide() in jQuery

To hide elements in jQuery, hide() method is used.

Parameters may or may not be used in hide() method.

Syntax 1


When using the above syntax, elements will be hidden immediately without any animation.

Syntax 2


  • duration - It is optional, it is used to specify the delay. It can have three values
    • Default value is 400.
    • number - Integer values are given in milliseconds.
    • slow - It specifies 600 milliseconds.
    • fast - It specifies 200 milliseconds.
  • easing - It is optional, it specifies speed at which the animation progresses.It can have two values.
    • swing - It is a default value, animation progresses irregular way.
    • linear - it specifies animation progresses at a constant pace.
  • complete - It is optional. It indicate a function, and it will be executed after the element is hidden.
Syntax 3


  • options - Options given below are optional
    • duration - It is used to determine how long the animation will run. It can be defined by string or number.
    • easing - It is used to determine for transition which easing function to be used. It is defined by string.
    • queue - It is denoted by Boolean, whether to place the animation in the effects queue. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it. If it is specified as false, the animation will begin immediately.
    • specialEasing - It is an object which contains one or more of the CSS properties. These properties are defined by arguments and its corresponding easing functions.
    • step - It is used to denote a function for each element when calling animated property.
    • progress - It is used to denote a function to be called after each step of the animation.
    • complete - It is used to denote a function, which is called after the animation on an element is complete.
    • start - It is used to denote a function, when the elements animation begins.
    • done - It is used to denote a function, when the animation on an element completes.
    • fail - It is used to denote a function, when the animation of an element fails to complete.
    • always - It is used to denote a function, when the animation on an element completes or stops without completing.

Example 1 - hiding without animation

Try Yourself

Example 2 - hiding element within specified milliseconds

Try Yourself

Example 3 - hide() with complete function

Try Yourself

Example 4 - calling complete function using function name

Try Yourself

Example 5 - Hiding element using easing(linear) value

Try Yourself

We are recommended to start the semi colon at starting

Example 6 - hide() with options

Try Yourself

Example 7 - hide() with options and progress bar

Try Yourself