Code has been added to clipboard!

Basics of Animation: Understanding jQuery Show Hide Method

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

jQuery has a lot of methods to offer for someone who enjoys applying various effects to their websites. A great place to start could be the jQuery show hide.

jQuery show hide method is used to make HTML elements appear and disappear. It is a basic type of animation that can also be a perfect starting point for a beginner. Making jQuery hide and show elements does not require a lot of code lines, so it's easy to grasp and start using.

jQuery Show Hide: Main Tips

  • jQuery has a selection of various methods for applying effects and animation to elements.
  • The hide and show methods might be considered the most basic, as you can apply them with a minimal amount of code.
  • jQuery hide show can also be combined with toggle method.

Definition and Syntax

One of the main merits of jQuery is the animations. Compared to using pure JavaScript, it makes the task vastly easier. A simple and highly useful example of this would be the jQuery hide and show methods:

These methods follow the same syntax pattern as any other jQuery statement:

$(selector).hide | show(duration,callback);

As you can see, jQuery show hide accepts two parameters. Both of them are optional:

  • duration represents a string or number value (in milliseconds) that specifies how long the animation will take.
  • callback defines a function to be executed once the method's execution is complete.

Keep in mind that duration takes in specific keyword values in the form of a string:

  • slow - 600-millisecond duration
  • fast - 200-millisecond duration

Additionally, it should be noted that the default duration of the animation is 400 milliseconds.

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

Adding Toggle

To take things a step further, you may also try using this method with the toggle method, thus creating a combined toggle show hide jQuery method:

By combining jQuery hide show with toggle, we made it so clicking the same button can make the item appear and disappear as the button is clicked repeatedly. All we had to do was to place the method inside one of the alternate functions of the toggle method.

jQuery Show Hide: Summary

  • The jQuery hide and show methods are some of the most simple animation effects.
  • As they require a minimal amount of code, they are a perfect place to start for jQuery newbies.
  • A combined toggle show hide jQuery method might be created to make the same object appear and disappear as the same button is clicked.

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: 28/01/2021
3176 People Used
Only 97 Left
Rating
5.0