Easy Tutorial
❮ Sel Firstoftype Jq Sel Attribute ❯

jQuery fadeIn() Method

jQuery Effects Methods

Example

Use the fade-in effect to show all <p> elements:

$("button").click(function(){
    $("p").fadeIn();
});

Definition and Usage

The fadeIn() method gradually changes the opacity of the selected elements from hidden to visible (fade effect).

Note: Hidden elements will not be fully displayed (no longer affecting the layout of the page).

Tip: This method is often used together with the fadeOut() method.

Syntax

Parameter Description
speed Optional. Specifies the speed of the fade effect. Possible values: milliseconds<br> "slow"<br> "fast"
easing Optional. Specifies the speed of the element at different points of the animation. The default value is "swing". Possible values: "swing" - moves slower at the start/end, faster in the middle<br> "linear" - moves at a constant speed. Tip: More easing functions are available in extensions.
callback Optional. A function to be executed after the fadeIn() method completes. To learn more about the callback, visit our jQuery Callback chapter.

Try It - Examples

fadeIn() - Using speed parameter

fadeIn() - Using callback parameter


jQuery Effects Methods

❮ Sel Firstoftype Jq Sel Attribute ❯