Sliding jQuery Effects

Slide elements up and down using the jQuery slide methods.

Illustration:

jQuery slideDown()

Shows the jQuery slideDown() method in action.

jQuery slideUp()

shows how to use the jQuery slideUp() method.

slideToggle jQuery ()

The slideToggle() method of jQuery is demonstrated.


jQuery Sliding Methods

jQuery can be used to create a sliding effect on items.

In jQuery, the following slide methods are available:


jQuery slideDown() Method

Use the jQuery slideDown() function to move an element down.

Syntax:

$(selector).slideDown(speed,callback);

"The duration of the effect is defined by the optional speed parameter. It can be set to ""slow," ""fast," or milliseconds.

The optional callback attribute controls a function that must be performed after the sliding is finished.

The slideDown() method is illustrated in the following illustration:"

Illustration:

 

EXAMPLE ❯


jQuery slideUp() Method

Use the jQuery slideDown() function to move an element down.

Syntax:

$(selector).slideUp(speed,callback);

"The duration of the effect is defined by the optional speed parameter. It can be set to ""slow," ""fast," or milliseconds.

The optional callback attribute controls a function that must be performed after the sliding is finished.

The slideDown() method is illustrated in the following illustration:"

Illustration:

EXAMPLE ❯


jQuery slideToggle() Method

The slideToggle() method in jQuery rotates between of slideDown() and slideUp() methods.

If the components were rolled down, slideToggle() will put them back up.

If the objects were moved up, slideToggle() will make them move down.

$(selector).slideToggle(speed,callback);

The default speed parameter can be defined to "slow," "rapid," or milliseconds.

The additional callback parameter is a function that would be run after the sliding is concluded.

The slideToggle() method is outlined in the following illustration:

Illustration:

EXAMPLE ❯