Tutorial

Sign Up

log In

JQuery
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 ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.