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 –

A. jQuery slideDown() Method :

It is used to slide down any element.

Syntax :

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

$("#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>

B. jQuery slideUp() Method :

It is used to slide up any element.

Syntax :

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

$("#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>

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);

$("#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>