jQuery Sliding Effect

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

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. NoParameter NameDescription
1selectorIf you want to apply jQuery sliding effect, you need to first access the HTML by using the selector parameter. This is the required parameter.
2speedThe 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.
3callbackThe optional parameter callback is the function you can use to execute after the occurrence of the slide up effect.

Example of slideUp()

Test it Live

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

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. NoParameter NameDescription
1selectorBefore 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.
2speedThe 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.
3callbackThe callback is the optional parameter which uses a function to execute after the occurrence of the slide down method.

Example of jQuery slideDown()

Test it Live

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

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. NoParameter NameDescription
1selectorThis is the required parameter to use. The selector parameter applies the required jQuery slide toggle method by accessing the HTML element.
2speedThis 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.
3callbackThe 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()

Test it Live

Output

This is the paragraph to show slide toggle effect.


You must also read.

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.