slideDown() method in jQuery

slideDown() in jQuery

The slideDown() method is used to animate the height of the specified element, is such a way it animates like the element is scrolling down.

Durations are given in milliseconds, higher values indicate slower animations.

By setting jQuery.fx.off = true all jQuery effects can be turned off globally , which in turn sets the duration to 0.

Syntax 1

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

  • duration
    • Default value is 400.
    • number - Integer values are given in milliseconds.
    • slow - It denotes 600 milliseconds.
    • fast - It denotes 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 2

$(selector).slideDown(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 - slideDown() and show the element

Try Yourself

Example 2 - slideDown() within specified 2000ms(2sec) duration

Try Yourself

Example 3 - slideDown() with complete function

Try Yourself

Example 4 - calling complete function using function name

Try Yourself

Example 5 - slideDown() using easing(linear) value

Try Yourself

Example 6 - slideDown() with options

Try Yourself

Example 7 - slideDown() with options and progress bar

Try Yourself