jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Effects - Sliding

jQuery provides a trivially simple interface for doing various kind of amazing effects.

jQuery effect methods allow us to quickly apply commonly used effects with a minimum configuration.

Example 1 (Click the DIV below):
Click to slide up/down the panel

jQuery is a fast, lightweight, and feature-rich JavaScript library that is based on the principle "write less, do more".

jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.


Example 2 (Click the DIV below):
The purpose of jQuery is to make it much easier to use JavaScript on your website.


jQuery Sliding Methods

With jQuery we can create a sliding effect on elements.

We have the following jQuery slide methods:

The following section will show you how to use each sliding method.


jQuery slideUp() and slideDown()

The slideUp() method hides the selected elements with a sliding motion.

The slideDown() method displays the selected elements with a sliding motion.

The following example demonstrates the usage of slideUp() method and slideDown() method:

Run code

Here is the syntax for slideUp() method:

$(selector).slideUp(duration, easing, callback);

Here is the syntax for slideDown() method:

$(selector).slideDown(duration, easing, callback);

Both slideUp() and slideDown() methods accept three optional parameters:

  • duration - Determines how long the sliding effect will run. Possible values: "slow", "fast", or milliseconds
  • easing - Indicates which easing function to use for the transition. Possible values: "swing", "linear"
  • callback - Specifies a function to call once the sliding method is completed

The following example demonstrates the duration parameter with slideUp() and slideDown():

Run code

The following example demonstrates the callback parameter with slideUp() and slideDown():

Run code

Animates all spans (words in this case) to slide fastly, completing each animation within 200 milliseconds:

Run code

jQuery slideToggle() Method

We can also toggle between sliding up and down HTML elements using the slideToggle() method.

If the selected element is initially displayed, it will be hidden; if hidden, it will be shown.

The following example toggles between slideUp and slideDown all <p> elements when a button is clicked:

Run code

Here is the syntax for slideToggle() method:

$(selector).slideToggle(duration, easing, callback);

The slideToggle() method accepts three optional parameters:

  • duration - Determines how long the sliding effect will run. Possible values: "slow", "fast", or milliseconds
  • easing - Indicates which easing function to use for the transition. Possible values: "swing", "linear"
  • callback - Specifies a function to call once the slideToggle() method is completed

jQuery Effects Reference

For a complete effects reference, visit our jQuery Effects Reference.