jQuery Slide Effect Methods

1. jQuery Slide Effects Overview

jQuery slide methods let you smoothly reveal and hide content by sliding elements up or down. Use them to build collapsible panels, accordions, and other interactive UI components with minimal code.

1.1. jQuery Sliding Effect Methods

• slideDown() – Slide elements down into view
• slideUp() – Slide elements up out of view
• slideToggle() – Toggle between slideDown and slideUp

2. jQuery slideDown() Method

The slideDown() method reveals a hidden element by sliding it down, animating its height from zero to full.

2.1. Syntax

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

2.2. slideDown() — No Duration

Instantly slides the element into view with no animation.

// Show immediately
$('#panelSlide').slideDown(0);

2.3. slideDown() — Milliseconds

Slides the element down over a duration for a smooth reveal.

// Slide down over 400ms
$('#panelSlide').slideDown(400);

2.4. slideDown() — slow/fast

Use jQuery’s built‑in “slow” (600 ms) or “fast” (200 ms) presets.

// Slide down slowly
$('#panelSlide').slideDown('slow');
// Slide down quickly
$('#panelSlide').slideDown('fast');

2.5. slideDown() — Callback

Runs a callback function immediately after the slideDown completes.

// Slide down then alert
$('#panelSlide').slideDown(400, function() {
  alert('Panel is fully visible!');
});

3. jQuery slideUp() Method

The slideUp() method hides a visible element by sliding it up, animating its height from full to zero.

3.1. Syntax

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

3.2. slideUp() — No Duration

Instantly hides the element with no sliding animation.

// Hide immediately
$('#panelSlide').slideUp(0);

3.3. slideUp() — Milliseconds

Slides the element up over a duration for a smooth hide.

// Slide up over 400ms
$('#panelSlide').slideUp(400);

3.4. slideUp() — slow/fast

Apply jQuery’s “slow” or “fast” presets for quick setup.

// Slide up slowly
$('#panelSlide').slideUp('slow');
// Slide up quickly
$('#panelSlide').slideUp('fast');

3.5. slideUp() — Callback

Execute custom code after the slideUp animation finishes.

// Slide up then show message
$('#panelSlide').slideUp(400, function() {
  $('#panelSlide').after('<p class="callback-msg">Panel is now hidden</p>');
});

4. jQuery slideToggle() Method

The slideToggle() method toggles between sliding an element up and down based on its current state.

4.1. Syntax

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

4.2. slideToggle() — No Duration

Instantly toggles the element’s slide state.

// Instant toggle
$('#panelSlide').slideToggle(0);

4.3. slideToggle() — Milliseconds

Slides up or down over a duration for a smooth toggle.

// Toggle slide over 400ms
$('#panelSlide').slideToggle(400);

4.4. slideToggle() — slow/fast

Use “slow” or “fast” presets to toggle without manual timing.

// Slide toggle slowly
$('#panelSlide').slideToggle('slow');
// Slide toggle quickly
$('#panelSlide').slideToggle('fast');

4.5. slideToggle() — Callback

Run a callback function immediately after the toggle completes.

// Toggle slide then notify
$('#panelSlide').slideToggle(400, function() {
  console.log('Slide toggled');
});