jQuery Effect - fadeIn() Method

jQuery Effect Reference Manual

Example

Use the fade-in effect to display a hidden <p> element:

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

Try it yourself

Definition and Usage

The fadeIn() method uses a fade-in effect to display the selected element if it is hidden.

Syntax

$(selector).fadeIn(speed,callback)
Parameters Description
speed

Optional. Specify the speed of the element from hidden to visible. The default is "normal".

Possible values:

  • Milliseconds (e.g., 1500)
  • "slow"
  • "normal"
  • "fast"

In the case of setting the speed, the element gradually changes its opacity during the process from hidden to visible (creating a fade-in effect).
callback

Optional. The function to be executed after the fadeIn function is executed.

For more information about callback, please visit our jQuery Callback chapter.

This parameter cannot be set unless the speed parameter is set.

Tips and Notes

Tip:If the element is already displayed, the effect does not produce any change unless a callback function is specified.

Note:This effect is applicable to elements hidden by jQuery or elements declared with display:none in CSS (but not applicable to elements with visibility:hidden).

More examples

Use the speed parameter
Use the speed parameter to control the fade-in or fade-out of elements.

jQuery Effect Reference Manual