show() method in jquery

show() in jQuery

show() method is used to display the specified elements.

This method is similar to the css method "display" and "block". But in here the display property is used to restore the elements to its initial state.

.show() can be used as an animation method by providing a duration, a plain object, or a "complete" function.

When the .show() is used as the animation method, the width, height, and opacity of the elements are animated simultaneously.

Durations are specified in milliseconds, higher values are used to indicate slower animations.

If !important is used in the styles, such as display: none !important, .show(), it will not override !important.

All jQuery effects, including show(), can be turned off globally by setting jQuery.fx.off = true, which effectively sets the duration to 0.

Syntax 1

$(selector).show()

In the above syntax, elements will be made visible without any animation.

Syntax 2

$(selector).show([duration][,easing][,complete])

  • duration - It is optional and 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 and is used to specify the speed at which the animation progresses.It can have two values.
    • swing - It is a default value, animation progresses in an irregular way.
    • linear - It specifies that the animation progresses at a constant pace.
  • complete - It is optional. It indicates a function which will be executed after the element is hidden.
Syntax 3

$(selector).show(options)

  • options - Given below options are optional
    • duration - It can be defined by string or number and is used to determine how long the animation will run.
    • easing - It is defined by string and is used to determine for transition which easing function to be used.
    • queue - It is denoted by Boolean, and is used to determine 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 and 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 - showing without animation

Try Yourself

Example 2 - showing element within specified milliseconds

Try Yourself

Example 3 - show() with complete function

Try Yourself

Example 4 - calling complete function using function name

Try Yourself

Example 5 - showing element using easing(linear) value

Try Yourself

Example 6 - Hide & show

Try Yourself

Example 7 - show() with options

Try Yourself

Example 8 - show() with options and progress bar

Try Yourself