WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

jQuery Slide

Previous Next

jQuery Sliding Effects — they’re perfect for making your UI feel smooth and interactive.


jQuery Sliding Methods

jQuery provides three main sliding methods to show and hide elements with a sliding motion:

Method

Description

.slideDown()

Slides an element down to show it

.slideUp()

Slides an element up to hide it

.slideToggle()

Toggles between slideDown() and slideUp()

jQuery slideDown() Method


jQuery slideDown() method — it's a simple yet powerful way to reveal hidden content with a smooth sliding animation.


Syntax:


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



  • speed (optional) – "slow", "fast", or milliseconds (e.g., 1000)
  • easing (optional) – "swing" (default) or "linear"
  • callback (optional) – Function to run after the animation completes


The following example demonstrates the slideDown() method:

Example
<script>
$(document).ready(function(){
$("#showBtn").click(function(){
$("#panel").slideDown(800);
});
});
</script>
Try it yourself

jQuery slideUp() Method



The .slideUp() method hides a visible element by sliding it up vertically.


Syntax:


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



  • speed (optional) – "slow", "fast", or milliseconds (e.g., 1000)
  • easing (optional) – "swing" or "linear" (controls animation style)
  • callback (optional) – Function to run after the animation completes



The following example demonstrates the slideUp() method:

Example
<script>
$(document).ready(function(){
$("#hideBtn").click(function(){
$("#panel").slideUp(800);
});
});
</script>
Try it yourself

jQuery slideToggle() Method


The .slideToggle() method checks if the element is visible:

  • If visible, it performs a .slideUp()
  • If hidden, it performs a .slideDown()

It’s like a switch for sliding visibility!



Syntax:


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


  • speed (optional) – "slow", "fast", or milliseconds (e.g., 800)
  • easing (optional) – "swing" or "linear" (controls animation style)
  • callback (optional) – Function to run after the animation completes


The following example demonstrates the slideToggle() method:

Example
<script>
$(document).ready(function(){
$("#toggleBtn").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
Try it yourself

Previous Next