jQuery Slide

In this tutorial you will learn how to create slide motion effect using jQuery.

jQuery slideUp() and slideDown() Methods

The jQuery slideUp() and slideDown() methods is used to hide or show the HTML elements by gradually decreasing or increasing their height (i.e. by sliding them up or down).

Like other jQuery effects methods, you can optionally specify the duration or speed parameter for the slideUp() and slideDown() methods to control how long the slide animation will run. Durations can be specified either using one of the predefined string'slow' or 'fast', or in a number of milliseconds; higher values indicate slower animations.

You can also specify a callback function to be executed after the slideUp() or slideDown()method completes. We’ll learn more about the callback function in upcoming chapters.

jQuery slideToggle() Method

The jQuery slideToggle() method show or hide the selected elements by animating their height in such a way that if the element is initially displayed, it will be slide up; if hidden, it will be slide down i.e. toggles between the slideUp() and slideDown() methods.

Similarly, you can specify the duration parameter for the slideToggle() method likeslideUp() and slideDown() methods to control the speed of the slide toggle animation in jQuery Slide.

Similarly, you can also specify a callback function for the slideToggle() method.

This is the end of the tutorial to create jQuery Slide. If you have any question regarding the concept, you may ask at our Forum Section