YouTip

## jQuery hide() Method The `hide()` method is a built-in jQuery effect method used to hide selected elements. This method is highly versatile, allowing you to hide elements instantly or create smooth transition animations by adjusting its speed, easing, and callback parameters. --- ## Definition and Usage The `hide()` method hides the matched elements by animating their width, height, and opacity down to 0. Once the animation completes, the element's CSS `display` property is set to `none`. * **CSS Equivalent:** This is functionally similar to applying the CSS property `display: none;`. * **Layout Impact:** Hidden elements no longer take up any space in the page layout (they are completely removed from the visual flow). * **Reversing the Effect:** To reveal hidden elements, use the [show()](eff-show.html) method or toggle between them using [toggle()](eff-toggle.html). --- ## Syntax ```javascript $(selector).hide(speed, easing, callback); ``` ### Parameter Values | Parameter | Type | Description | | :--- | :--- | :--- | | `speed` | *Number / String* | **Optional.** Specifies the speed of the hiding effect.

**Possible values:**
• Duration in milliseconds (e.g., `1500` or `400`)
• `"slow"` (equals 600ms)
• `"fast"` (equals 200ms) | | `easing` | *String* | **Optional.** Specifies the speed curve of the transition. Default value is `"swing"`.

**Possible values:**
• `"swing"` - Moves slower at the beginning/end, but faster in the middle.
• `"linear"` - Moves at a constant speed.

*Note: More easing functions are available via external plugins (such as jQuery UI).* | | `callback` | *Function* | **Optional.** A function to be executed after the `hide()` method completes its animation. | --- ## Code Examples ### 1. Basic Usage (Instant Hide) Hide all `

` elements instantly when a button is clicked: ```javascript $("button").click(function(){ $("p").hide(); }); ``` ### 2. Using the `speed` Parameter Hide elements with a smooth transition by specifying a speed (in milliseconds or predefined strings): ```javascript // Hide with a slow transition (600ms) $("#btn-slow").click(function(){ $("p").hide("slow"); }); // Hide with a custom duration of 1000 milliseconds (1 second) $("#btn-custom").click(function(){ $("p").hide(1000); }); ``` ### 3. Using the `callback` Parameter Execute a custom function immediately after the hide animation completes: ```javascript $("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden!"); }); }); ``` --- ## Technical Considerations * **Instant vs. Animated:** If no parameters are passed, the element is hidden instantly with no animation (by immediately setting `display: none`). If a `speed` is provided, the element's height, width, and opacity are animated simultaneously. * **Callback Execution:** The callback function is executed once per matched element. If your selector matches multiple elements (e.g., `$("p")` matches three paragraphs), the callback function will run three times—once for each element as it finishes hiding. * **Accessibility (a11y):** Hiding elements with `hide()` or `display: none` removes them from screen readers. If you want to hide elements visually but keep them readable by assistive technologies, consider using CSS classes with absolute positioning off-screen instead.