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

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.

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

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.