jQuery Effect - Slide

The jQuery sliding method allows elements to slide up and down.

Effect demonstration

Click here to hide/display the panel

An inch of time is an inch of gold, therefore, we provide you with quick and easy-to-understand learning content.

Here, you can obtain any knowledge you need through an easy-to-understand convenient mode.

Example

jQuery slideDown()
Demonstrate the jQuery slideDown() method.
jQuery slideUp()
Demonstrate the jQuery slideUp() method.
jQuery slideToggle()
Demonstrate the jQuery slideToggle() method.

jQuery Sliding Methods

With jQuery, you can create sliding effects on elements.

jQuery has the following sliding methods:

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown() Method

The jQuery slideDown() method is used to slide down elements.

Syntax:

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

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function to be executed after the slide is completed.

The following example demonstrates the slideDown() method:

Example

$("#flip").click(function(){
  $("#panel").slideDown();
);

Try It Yourself

jQuery slideUp() Method

The jQuery slideUp() method is used to slide up elements.

Syntax:

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

Optional speed The parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

Optional callback The parameter is the name of the function to be executed after the slide is completed.

The following example demonstrates the slideUp() method:

Example

$("#flip").click(function(){
  $("#panel").slideUp();
);

Try It Yourself

jQuery slideToggle() Method

The jQuery slideToggle() method can switch between slideDown() and slideUp() methods.

If the element is sliding down, then slideToggle() can slide it up.

If the element is sliding up, then slideToggle() can slide it down.

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

Optional speed The parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

Optional callback The parameter is the name of the function to be executed after the slide is completed.

The following example demonstrates the slideToggle() method:

Example

$("#flip").click(function(){
  $("#panel").slideToggle();
);

Try It Yourself

jQuery Effects Reference Manual

For a comprehensive look at jQuery effects, please visit our jQuery Effects Reference Manual.