YouTip

# jQuery fadeToggle() Method The jQuery `fadeToggle()` method toggles between the `fadeIn()` and `fadeOut()` methods. * If the selected elements are faded out (hidden), `fadeToggle()` will display them with a fade-in effect. * If the selected elements are faded in (visible), `fadeToggle()` will hide them with a fade-out effect. > **Note:** Elements that are completely faded out (hidden) will have their `display` property set to `none`, meaning they will no longer affect the layout of the page. --- ## Syntax ```javascript $(selector).fadeToggle(speed, easing, callback); ``` ### Parameter Values | Parameter | Type | Description | | :--- | :--- | :--- | | `speed` | String / Number | *Optional.* Specifies the speed of the fading effect.

**Possible values:**
• Duration in milliseconds (e.g., `400`, `1000`)
• `"slow"`
• `"fast"` | | `easing` | String | *Optional.* Specifies the speed curve of the animation. 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 `fadeToggle()` method completes its animation. | --- ## Code Examples ### Example 1: Basic fadeToggle() Usage This example demonstrates how to toggle the visibility of three different colored boxes using `fadeToggle()`. ```html Click to Toggle Fade

``` ### Example 2: Using the Callback Parameter This example demonstrates how to execute a custom function (callback) immediately after the fade transition completes. ```javascript $("button").click(function(){ $("#box").fadeToggle("slow", function(){ alert("The fadeToggle animation has finished!"); }); }); ``` --- ## Technical Considerations 1. **Layout Impact:** When an element is faded out completely, jQuery sets its CSS `display` property to `none`. This removes the element from the document flow, causing surrounding elements to shift and fill the empty space. 2. **Animation Queue:** If `fadeToggle()` is triggered repeatedly before an animation finishes (e.g., rapid button clicks), the animations will queue up. To prevent this behavior, you can use the `.stop()` method before calling `fadeToggle()`: ```javascript $("#element").stop().fadeToggle(); ```