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.
Contents
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.
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.