jQuery Slide method

jQuery provides slide methods to slide elements of your document. This jQuery slide method tutorial guides you through the syntax of slide methods with examples.

Using slideDown() method

Syntax

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

  • Where selector = An element to slide down, that can be p, div etc.
  • Speed = This can be given value in milliseconds, “fast” or “slow”
  • Callback = An optional argument, function that will be executed after sliding completes

For example:

$(“#slider”).slideDown(“slow”);

Running Example of slideDown method

Click on the link in the demo page for seeing the slide down method in action. As you press the button “Click here to slidedown text”, you will see a paragraph of text sliding down:

Experience this example online

Using slideUp() method

Syntax

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

  • Where selector = An element to slide up, that can be p, div etc.
  • Speed = This can be given value in milliseconds, “fast” or “slow”
  • Callback = An optional argument, function that will be executed after sliding completes

For example:

$(“#slider”).slideUp(“slow”);

Running Examples of slideUp method

Again, click the link to see sliding up of the paragraph by using slideUp method:

Experience this example online

Also see