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.

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
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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.

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 22/01/2021
3176 People Used
Only 97 Left
Rating
5.0