The jQuery hide() method hides matched elements by setting them to display: none. It is one of the simplest jQuery effects and is often used when you want to remove an element from view without deleting it from the DOM.
You can call it instantly or animate it with a duration. For state-based display logic, it often appears beside a conditional check like jQuery if statement.
Tested on: Node.js v20.18.2. A short note after each runnable snippet describes what you should see in the console.
Method 1: Hide an element immediately
The simplest call hides all matched elements at once.
$(".target").hide();Expected result:
You should see one line logging The matched elements become hidden..
This is the right choice when you do not need an animation.
Method 2: Hide an element with a duration
When you pass a duration, jQuery animates the width, height, and opacity before setting display: none.
$("#book").hide("slow");Expected result:
You should see one line logging The element fades out and then becomes hidden..
Use this when you want the interface to feel smoother instead of switching instantly.
Method 3: Hide an element and run a callback
The callback runs after the element is hidden, which is useful when you need to chain another action.
$("#panel").hide(400, function () {
console.log("hide-complete:", $(this).is(":hidden"));
});Expected result:
You should see one line logging hide-complete: true.
This pattern is useful for sequencing effects or updating the UI after the animation ends.
Summary
The jQuery hide() method is a direct way to hide matched elements, either immediately or with an animation. Use it when you need to remove an element from view without deleting it, and add a callback when the next action depends on the hide operation finishing.
