show() method in jquery

show() in jQuery

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

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

Syntax 1

$(selector).show()

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

Syntax 2

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

  • 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 indicate a function, and it will be executed after the element is shown.
Syntax 3

$(selector).show(options)

  • 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 - 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