jQuery Sliding Effect

Introduction to Sliding Effects

jQuery effects enhance the interactivity of your website. jQuery offers a trivially simple interface for performing numerous spectacular effects such as show, hide, fade-in, fade-out, slide-up, slide-down, toggle, and so on.

We can easily apply commonly used effects with minimal preparation using jQuery methods. The Slide effect can be combined with the show/hide/toggle controls. This removes the element from the viewport.

List of jQuery Sliding Effects

You can slide an HTML element up and down using jQuery. The following methods can be used to conceal and show an HTML element with a sliding effect.

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

jQuery slideUp() Method (Syntax + Examples)

With a sliding motion, hide the matched parts. The .slideUp() method animates the height of the components that have been matched.

Lower portions of the page appear to glide up, concealing the items. The display style property is set to none whenever the height reaches 0 (or, if specified, whatever the CSS min-height value is) to guarantee that the element no longer influences the page's layout.

Durations are indicated in milliseconds; greater values indicate slower animations rather than faster animations. The strings 'quick' and 'slow' denote periods of 200 and 600 milliseconds, respectively.

If no additional string is supplied, or if the duration parameter is omitted, the duration parameter's default value of 400 milliseconds is used.

Syntax:

Method Parameters:

• duration: A text or number that specifies how long the animation will last.
• easing: A string indicating which transition easing function to employ.
• complete: Once the animation is finished, run this procedure once per each matching element.

Example:

The parent paragraph is animated to glide up, and the animation is completed in 200 milliseconds. When the animation is finished, an alert is displayed.

You can see the output by running the above code on a browser. The elements slide up and get hidden when you click on them.

jQuery slideDown() Method (Syntax + Examples)

With a sliding motion, display the matched parts. The .slideDown() method animates the height of the corresponding items. Lower areas of the page glide down, making room for the disclosed things.

Durations are indicated in milliseconds; greater values indicate slower animations rather than faster animations. The strings 'quick' and 'slow' denote periods of 200 and 600 milliseconds, respectively.

If no additional string is supplied or the duration parameter is omitted, the duration parameter's default value of 400 milliseconds is used.

Syntax:

Method Parameters:

• duration: A text or number that specifies how long the animation will last.
• easing: A string indicating which transition easing function to employ.
• complete: Once the animation is finished, run this procedure once per each matching element.

Example:

Output

You can see the output by running this code on a browser. The elements slide down and get displayed when you click on the "Click me" section.

jQuery slideToggle() Method (Syntax + Examples)

Using a sliding motion, show or hide the matched parts. The .slideToggle() method animates the height of the corresponding items. Lower portions of the page appear to slide up and down, revealing or concealing the items. If the element is initially visible, it will be hidden; if it is not visible, it will be shown.

As needed, the display property is saved and restored. If an element with an inline display value is hidden and subsequently shown, it will be displayed inline again. When the height hits 0 following a concealing animation, the display style attribute is set to none to ensure that the element no longer influences the page layout.

Durations are indicated in milliseconds; greater values indicate slower animations rather than faster animations. Strings 'quick' and 'slow' can be used.

Syntax:

Method Parameters

• duration: A text or number that specifies how long the animation will last.
• easing: A string indicating which transition easing function to employ.
• complete: Once the animation is finished, run this procedure once per each matching element.

Example:

All paragraphs are animated to glide up and down, with the animation taking 600 milliseconds to complete.

You can see the output by running this HTML code on any browser. When you click the "Toggle" button, you will see the toggle effect on the paragraph.