slideUp() method in jQuery

slideUp() in jQuery

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

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).slideUp([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).slideUp(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 - slideUp() and hide the element

Try Yourself

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

Try Yourself

Example 3 - slideUp() with callback function

Try Yourself

Example 4 - calling callback function using function name

Try Yourself

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

Try Yourself

Example 6 - slideUp() with options

Try Yourself

Example 7 - slideUp() with options and progress bar

Try Yourself