jQuery Slide : Effects



jQuery Sliding Effect :

In order to slide the element’s position either in up direction or in down direction we use slide method of jQuery. jQuery provides 3 methods related to sliding -

No Effect Meaning
1. jQuery slideDown() Used to slide down any element.
2. jQuery slideUp() Used to slide up any element.
3. jQuery slideToggle() Used to toggle slideUp() and slideDown() effects.

A. jQuery slideDown() Method :

It is used to slide down any element.

Syntax :

$(selector).slideDown(speed,callback);
Parameter Significance
speed It is time in milliseconds required to slide down the given element.
callback It is callback function which will be called automatically after the function execution.
$("#slidePanel").slideDown("fast");

above line of code is used to slide down element having the id “slidepanel” in order to reveil the content of slidePanel. Consider the below example for more details -

Example :

<script> 
$(document).ready(function(){
  $("#main").click(function(){
    $("#slidePanel").slideDown("fast");
  });
});
</script>

Try it Yourself »

B. jQuery slideUp() Method :

It is used to slide up any element.

Syntax :

$(selector).slideUp(speed,callback);
Parameter Significance
speed It is time in milliseconds required to slide up the given element.
callback It is callback function which will be called automatically after the function execution.
$("#slidePanel").slideUp("fast");

above line of code is used to slide up element having the id “slidepanel” in order to hide the content of slidePanel. Consider the below example for more details -

Example :

<script> 
$(document).ready(function(){
  $("#main").click(function(){
    $("#slidePanel").slideUp("fast");
  });
});
</script>

Try it Yourself »

C. jQuery slideToggle() Method :

It is used to slide toggle any element.

  1. slideToggle() method is used to toggle between slideUp() and slideDown() method.
  2. If element is already slid down then slideToggle() method will slide them up
  3. If element is already slid up then slideToggle() method will slide them down

Syntax :

$(selector).slideToggle(speed,callback);
Parameter Significance
speed It is time in milliseconds required to slide up the given element.
callback It is callback function which will be called automatically after the function execution.
$("#slidePanel").slideToggle("fast");

above line of code will -

  1. slide down element having the id “slidepanel” , if it is already slid up
  2. slide up element having the id “slidepanel” , if it is already slid down

Example :

<script> 
$(document).ready(function(){
  $("#main").click(function(){
    $("#slidePanel").slideToggle("fast");
  });
});
</script>

Try it Yourself »