jQuery slide serves the same functionality of showing and hiding specified elements as the methods you already know. However, it does that by using a visual effect of vertical sliding. We will cover different ways you can use and analyze a few useful examples to help you grasp the idea of slide in jQuery well.
Contents
jQuery Slide: Main Tips
- The slide jQuery method is used to hide and show items with a vertical sliding effect.
- There are three methods you can use to create jQuery slide animations. They can also be combined with toggle functionality.
Different Methods
The fade method of the jQuery library is used to show and hide items with a transition effect, which gives a vertical sliding effect to the element.
Three methods apply this effect:
.slideDown()- makes jQuery slide panel down and show it..slideUp()- makes jQuery slide panel up and hide it..slideToggle()- alternates between applying the effect of slideDown and slideUp.
Combining with Toggle
The first two methods we mentioned above - .slideUp() and .slideDown() - are very similar to the hide and show methods shown earlier. They will work perfectly if you need a certain element only to appear or disappear once (unless a page is reloaded).
However, if you prefer to toggle its visibility as well as have a jQuery slide animation effect, we recommend using the slideToggle method.
The syntax for all three methods of slide in jQuery follows a very similar pattern:
$(selector).slideDown | slideUp | slideToggle(duration,callback);
As you can see, there are two parameters you may define. However, both of them might also be skipped, as they are optional for slide in jQuery.
Duration defines a string or number value that specifies how long the animation will take in milliseconds. The duration of the animation is 400 milliseconds by default. If you wish to specify a different duration, keep in mind that this parameter takes in keyword values in the form of a string: you may use slow for a 600-millisecond duration, or fast for a 200-millisecond duration.
The callback parameter is used to specify the function to be executed once the method's execution is complete.
jQuery Slide: Summary
- You can make HTML elements appear and dissapear by using jQuery slide animations.
- What makes it different from the simple hide and show method is a visual vertical sliding effect.
- Three methods are used for slide in jQuery, and you can add toggle functionality to them.