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>
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>
C. jQuery slideToggle() Method :
It is used to slide toggle any element.
- slideToggle() method is used to toggle between slideUp() and slideDown() method.
- If element is already slid down then slideToggle() method will slide them up
- 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 -
- slide down element having the id “slidepanel” , if it is already slid up
- 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>