jQuery Effects – Hide and Show Elements
What are jQuery Effects?
jQuery provides pre-built effects that allow developers to create smooth animations, transitions, and visual changes with very little code.
Why Use jQuery Effects?
✅ Easier than JavaScript animations
✅ Built-in functions for smooth transitions
✅ Works on all browsers
Most Common jQuery Effects
✔ Hide and Show (hide(), show()) – Make elements invisible or visible.
✔ Fade Effects (fadeIn(), fadeOut(), fadeToggle()) – Gradual visibility changes.
✔ Slide Effects (slideUp(), slideDown(), slideToggle()) – Sliding animations.
In this section, we will focus on hide and show effects.
jQuery Hide and Show Methods
1. The hide() Method
The hide() method makes an element disappear.
👉 Example: Hide a paragraph when a button is clicked.
$(“#hideBtn”).click(function() {
$(“p”).hide();
});
📌 What happens?
• When the “Hide” button is clicked, all <p> elements disappear.
2. The show() Method
The show() method makes an element visible again.
👉 Example: Show a paragraph when a button is clicked.
$(“#showBtn”).click(function() {
$(“p”).show();
});
📌 What happens?
• When the “Show” button is clicked, all hidden <p> elements reappear.
3. The toggle() Method
The toggle() method hides an element if it is visible and shows it if it is hidden.
👉 Example: Click a button to toggle a paragraph.
$(“#toggleBtn”).click(function() {
$(“p”).toggle();
});
📌 What happens?
• If the <p> is visible, it hides.
• If the <p> is hidden, it shows.
Adding Speed Control to Hide and Show
You can control the speed of hide and show effects by passing “slow”, “fast”, or a time in milliseconds.
👉 Example: Hide a paragraph slowly and show it fast.
$(“#hideBtn”).click(function() {
$(“p”).hide(“slow”);
});
$(“#showBtn”).click(function() {
$(“p”).show(“fast”);
});
📌 What happens?
• Clicking Hide makes the paragraph disappear slowly.
• Clicking Show makes the paragraph appear fast
👉 Example: Hide a paragraph in 1000 milliseconds (1 second)
$(“#hideBtn”).click(function() {
$(“p”).hide(1000);
});
📌 What happens?
• The paragraph will slowly disappear in 1 second.
Conclusion
🎯 hide() makes an element disappear.
🎯 show() makes an element reappear.
🎯 toggle() switches between hide and show.
🎯 You can add speed (slow, fast, milliseconds) for smooth animations.
