jQuery slide effect is used to slide the selected elements up and down.
We can use these slide methods to show and hide an HTML DOM element with a sliding effect.
We can use these slide methods to show and hide an HTML DOM element with a sliding effect.
jQuery Sliding Methods:
jQuery has the following sliding methods:
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() Method:
jQuery slideDown() method is used to gradually make the selected element appear on an HTML page with the slide down effect.
Syntax:
$(selector) is to select the HTML element.
Speed in milliseconds or “slow” or “fast” to adjust the speed of the slide down effect. It is an optional parameter.
The callback function is also an optional parameter and it executes when the slide down effect is complete.
jQuery slideUp() Method:
jQuery slideUp() method is used to gradually disappear an HTML element with a slide up effect. It is the reverse of slideDown() method.
Syntax:
$(selector) is used to select the HTML element on which this slide up effect is being applied.
The speed parameter is used to adjust the speed of the slide up effect. It can be in milliseconds or “slow” or “fast”.
The callback function is an optional parameter. It is a function that is passed as an argument to the slideUp() method, it executes when the slide up effect is complete.
jQuery slideToggle() Method:
jQuery slideToggle() method is used to toggle between slideUp() and slideDown() methods. If the HTML elements are slide down then this method will slide them up and if the elements are slide up then this method will slide them down.
Syntax:
$(selector) is to select HTML elements.
speed is an optional parameter and it can be passed in milliseconds or “slow” or “fast”.
callback_function is an optional parameter as well. This function executes when the effect is complete. In this case, it will execute when the slide toggle effect is complete.