🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

Code has been added to clipboard!

Learn to Use jQuery Slide Animations Quickly and Effectively

Reading time 3 min
Published Jul 3, 2019
Updated Oct 1, 2019

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.

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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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.