YouTip

## jQuery Effects - fadeOut() Method The `fadeOut()` method is a built-in jQuery effect used to gradually change the opacity of selected elements from visible to hidden (creating a fading-out transition). Once the fade-out animation is complete, the matched elements are set to `display: none`, meaning they will no longer occupy any space or affect the layout of the page. --- ## Syntax ```javascript $(selector).fadeOut(speed, easing, callback); ``` ### Parameter Values | Parameter | Type | Description | | :--- | :--- | :--- | | **`speed`** | *String* \| *Number* | *Optional.* Specifies the duration of the fade-out effect.
**Possible values:**
- Duration in milliseconds (e.g., `1000` or `400`)
- `"slow"` (600ms)
- `"fast"` (200ms) | | **`easing`** | *String* | *Optional.* Specifies the speed curve of the transition. Default value is `"swing"`.
**Possible values:**
- `"swing"` - Slower at the beginning and end, faster in the middle.
- `"linear"` - Constant speed throughout the transition.
*Note: More easing functions are available via external plugins (such as jQuery UI).* | | **`callback`** | *Function* | *Optional.* A function to execute once the `fadeOut()` animation is fully completed. | --- ## Code Examples ### 1. Basic Usage Fade out all `

` elements when a button is clicked: ```javascript $("button").click(function(){ $("p").fadeOut(); }); ``` ### 2. Using the `speed` Parameter You can control how fast the element fades out by passing different speed values: ```javascript $("button").click(function(){ // Fade out using predefined string speeds $("#box1").fadeOut("fast"); $("#box2").fadeOut("slow"); // Fade out using custom milliseconds (e.g., 2000ms = 2 seconds) $("#box3").fadeOut(2000); }); ``` ### 3. Using the `callback` Parameter The callback function is highly useful when you want to perform an action *only after* the fade-out animation has completely finished: ```javascript $("button").click(function(){ $("p").fadeOut("slow", function(){ alert("The paragraph is now completely hidden!"); }); }); ``` --- ## Technical Considerations * **Layout Impact:** Unlike setting CSS `visibility: hidden` (which hides the element but keeps its physical space reserved), `fadeOut()` ends by setting `display: none`. This causes the surrounding layout to shift and fill the empty space. * **Companion Method:** The `fadeOut()` method is commonly used in tandem with [fadeIn()](eff-fadein.html) to toggle visibility, or you can use [fadeToggle()](eff-fadetoggle.html) to automatically switch between the two states. * **Performance:** For modern web development, if you are animating a large number of elements, consider using CSS3 transitions (`transition: opacity`) for hardware-accelerated performance, though jQuery's `fadeOut()` remains excellent for cross-browser compatibility and easy callback handling.