jQuery fadeIn()Method

Examples

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

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

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

Note:Hidden elements will not be displayed at all (they no longer affect the layout of the page).

Tip:This method is usually used together with thefadeOut()method.

$(selector).fadeIn(speed,easing,callback)

Parameter	Description
speed	Optional. Specifies the speed of the fading effect. Possible values: Milliseconds "slow" "fast"
easing	Optional. Specifies the speed of the element at different points in the animation. Default value is "swing". Possible values: "swing" - moves slowly at the beginning/end, and fast in the middle "linear" - moves at a constant speed Tip:More easing functions are available in the extension plugins.
callback	Optional. The function to execute after the fadeIn() method has finished executing. To learn more about callbacks, visit ourjQuery Callbackchapter.

Parameter

Description

speed

Optional. Specifies the speed of the fading effect.

Possible values:

easing

Optional. Specifies the speed of the element at different points in the animation. Default value is "swing".

Possible values:

Tip:More easing functions are available in the extension plugins.

callback

Optional. The function to execute after the fadeIn() method has finished executing.

To learn more about callbacks, visit ourjQuery Callbackchapter.

fadeIn() - Use the speed parameter
How to use the speed parameter to specify the speed of the fading effect.

fadeIn() - Use the callback parameter
How to use the callback parameter when displaying elements with the fade-in effect.

Other Extensions