Search within TutorialsPark

Jquery Slide Effects


Learn to use jQuery to slide elements on and off the screen


jQuery Effects: Slide Effects

jQuery provides a set of methods that can be used to slide elements on and off the screen.

Table : jQuery Basic Effect Methods

Method Description
slideDown()
slideDown(time, function)
slideDown(time, easing, function)
To show elements by sliding them down.
sideUp(time)
sideUp(time, easing)
sideUp(time, easing, function)
To hide elements by sliding them up.
slideToggle()
slideToggle(time, function)
slideToggle(time, easing, function)
To toggle the visibility of elements by sliding them up and down.

jQuery Effects : Using slideUp() Effects

The jQuery method of slideUp() causes the matched elements displayed on the screen to be removed gradually from the display by decreasing their verical size creating a sliding up effect.

Example: slideUp() Methods without Arguments

Give it a TRY! » Note: It returns a jQuery Object, which can be used for chaining purposes


jQuery Effects : Using slideDown() Method

A jQuery method of slideDown() causes the matched elements displayed on the screen to be removed gradually from the display by decreasing their verical size creating a slidedown up effect.

Example: Using slideDown() Method

Give it a TRY! » Note:If no class names are specified in the parameter, all classes will be removed.


jQuery Effects : Using the slideToggle() Method in one Direction

The jQuery method of slideToogle() is used toggle the visibility of elements by sliding them upwards and downwards.

It performs a slideDown() on any hidden elements and then slideUp() on any displayed Elements.

Example: jQuery Effects: Using the slideToggle() Method

Give it a TRY! » Note:The method can take one or more class names as its parameter.