YouTip

## jQuery fadeIn() Method The `fadeIn()` method is a built-in jQuery effect used to gradually change the opacity of selected elements from hidden to visible, creating a smooth fade-in transition. ### Definition and Usage The `fadeIn()` method transitions the opacity of an element to make it appear on the page. * **Layout Impact:** If the element was previously hidden using `display: none`, the `fadeIn()` method will restore its display property (e.g., to `block`, `inline`, or `inline-block`) so that it once again occupies space in the page layout. * **Complementary Method:** This method is typically used in conjunction with the [fadeOut()](eff-fadeout.html) method to toggle visibility. --- ### Syntax ```javascript $(selector).fadeIn(speed, easing, callback); ``` | Parameter | Type | Description | | :--- | :--- | :--- | | **`speed`** | *String / Number* | *Optional.* Specifies the duration of the fade effect.
**Possible values:**

• Milliseconds (e.g., `400`, `1000`)
• `"slow"`
• `"fast"`

| | **`easing`** | *String* | *Optional.* Specifies the speed curve of the animation. Default is `"swing"`.
**Possible values:**

• `"swing"` - Slower at the beginning and end, faster in the middle
• `"linear"` - Constant speed throughout the animation

*(Note: More easing functions are available via external plugins, such as jQuery UI).* | | **`callback`** | *Function* | *Optional.* A function to be executed once the `fadeIn()` animation is fully complete. | --- ### Code Examples #### 1. Basic Usage Fade in all hidden `

` elements when a button is clicked: ```javascript $("button").click(function(){ $("p").fadeIn(); }); ``` #### 2. Using the `speed` Parameter Control how fast the elements fade in by passing different speed values: ```javascript $("button").click(function(){ $("#div1").fadeIn(); // Default speed $("#div2").fadeIn("slow"); // Slow preset $("#div3").fadeIn(3000); // Custom duration (3 seconds) }); ``` #### 3. Using the `callback` Parameter Execute a function immediately after the fade-in animation completes: ```javascript $("button").click(function(){ $("p").fadeIn("slow", function(){ alert("The fade-in animation is complete!"); }); }); ``` --- ### Considerations * **Initial State:** The `fadeIn()` method only works on elements that are currently hidden (e.g., elements with `display: none` or those hidden via `.hide()`). If an element is already fully visible, calling `fadeIn()` will have no visible effect. * **Animation Queue:** Like other jQuery effect methods, `fadeIn()` is added to the element's animation queue. If multiple animations are called consecutively, they will run one after another.