If you want to use jQuery Sliding Effect, jQuery comes with 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 Effect Using 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()

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

Output

This is the paragraph to show slide up effect.


jQuery Sliding Effect Using slideDown()

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

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

Output


jQuery Sliding Effect Using slideToggle()

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

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

Output

This is the paragraph to show slide toggle effect.


You must also read.

Leave a Reply

Your email address will not be published. Required fields are marked *