If you want to use the jQuery Sliding Effect, jQuery comes with a few handy methods to use. These methods are given below to perform jQuery slide up and slide down.
- slideUp()
- slideDown()
- slideToggle()
Now let’s start learning out each one of them to understand how to use jQuery sliding effect using slide up, slide down and slidetoggle effects using the jQuery methods on page load.
jQuery Sliding Effects
There are many jQuery functions which you can use to create a sliding effect. You can find those function below given with live examples.
jQuery slideUp()
jQuery slide up method gives the sliding effect to an HTML element by decreasing the height of it. This effect hides the HTML element by slowly decreasing the height and applying the display none CSS property.
The syntax of slide up method is given below.
Syntax of slideUp()
|
1 |
$(selector).slideUp(speed,callback) |
The syntax of slide up method contains three parameters selectors, speed, and callback. The ‘selector’ is the required field and the last two parameters speed and callback you can use optionally.
| Sr. No | Parameter Name | Description |
|---|---|---|
| 1 | selector | If you want to apply jQuery sliding effect, you need to first access the HTML by using the selector parameter. This is the required parameter. |
| 2 | speed | The optional parameter ‘speed’ controls the speed of decreasing the height of the HTML element on slide up effect. The possible values are ‘slow’, ‘fast’ or value in milliseconds. |
| 3 | callback | The optional parameter callback is the function you can use to execute after the occurrence of the slide up effect. |
Example of slideUp()
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-slideup").click(function(){ $("#para-slideup").slideUp(); }); }); </script> <p id="para-slideup">This is the paragraph to show slide up effect.</p> <button id="btn-slideup">Click me to slide up</button> |
Output
This is the paragraph to show slide up effect.
jQuery slideDown() Function
The slideDown() method can be used to slide down the HTML element. The jQuery slideDown method means to display the the HTML element by increasing the height of the element.
The syntax of jQuery slide down method is given below.
Syntax of slideDown()
|
1 |
$(selector).slideDown(speed,callback) |
The syntax of jQuery slideDown() method contains the three parameters selectors, speed, and callback. Check the below table to see the details about these parameters.
| Sr. No | Parameter Name | Description |
|---|---|---|
| 1 | selector | Before applying the effect you need to know first how to access it. You can use the required parameter selector to access and apply the required effect. |
| 2 | speed | The jQuery slide down method has ‘speed’ optional parameter to give the speed of the slide down element. The possible values for speed parameter can be ‘slow’, ‘fast’ or value in milliseconds. |
| 3 | callback | The callback is the optional parameter which uses a function to execute after the occurrence of the slide down method. |
Example of jQuery slideDown()
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-slidedown").click(function(){ $("#para-slidedown").slideDown(); }); }); </script> <p id="para-slidedown" style="display: none;">This is the paragraph to show slideDown effect.</p> <button id="btn-slidedown">Click me to slide down</button> |
Output
jQuery slideToggle() Function
You can perform jQuery slide down and slide up effect using the single slideToggle(). The slideToggle() increasing the height of the element when the element is in hidden state and decrease the height when the element is in displayed state.
The syntax of the jQuery slide Toggle method is given below.
Syntax of slideToggle()
|
1 |
$(selector).slideToggle(speed,callback) |
The syntax of jQuery slideToggle() contains the three parameters selectors, speed, and callback as you learned for slide up and slide down methods.See the details about each parameter one by one.
| Sr. No | Parameter Name | Description |
|---|---|---|
| 1 | selector | This is the required parameter to use. The selector parameter applies the required jQuery slide toggle method by accessing the HTML element. |
| 2 | speed | This is the optional parameter. You have to provide the speed of both the slide up and slide down feature performed by the single slidetoggle method. The possible values for this can be ‘slow’, ‘fast’ or value in milliseconds. |
| 3 | callback | The callback is the optional parameter. In this parameter, you can give a function to execute the slide up and slide down effects occur. |
Example of slideToggle()
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $("#btn-slidetoggle").click(function(){ $("#para-slidetoggle").slideToggle(); }); }); </script> <p id="para-slidetoggle">This is the paragraph to show slide toggle effect.</p> <button id="btn-slidetoggle">Click me to slide toggle</button> |
Output
This is the paragraph to show slide toggle effect.
You must also read.