jQuery Effect - Fade In and Out

With jQuery, you can achieve the fade-in and fade-out effects of elements.

Effect Demonstration

Click here to hide/display the panel

An inch of time is an inch of gold, therefore, we provide you with quick and easy-to-understand learning content.

Here, you can easily obtain any knowledge you need in an understandable and convenient way.

Example

jQuery fadeIn()
Demonstrate the jQuery fadeIn() method.
jQuery fadeOut()
Demonstrate the jQuery fadeOut() method.
jQuery fadeToggle()
Demonstrate the jQuery fadeToggle() method.
jQuery fadeTo()
Demonstrate the jQuery fadeTo() method.

jQuery Fading Method

With jQuery, you can achieve the fade-in and fade-out effects of elements.

jQuery has the following four fade methods:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() method

The jQuery fadeIn() method is used to fade in hidden elements.

Syntax:

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

Optional speed The parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

Optional callback The parameter is the name of the function to be executed after the fading is completed.

The following example demonstrates the fadeIn() method with different parameters:

Example

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
);

Try It Yourself

jQuery fadeOut() method

The jQuery fadeOut() method is used to fade out visible elements.

Syntax:

$(selector.fadeOut(speed,callback);

Optional speed The parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

Optional callback The parameter is the name of the function to be executed after the fading is completed.

The following examples demonstrate the fadeOut() method with different parameters:

Example

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
);

Try It Yourself

jQuery fadeToggle() method

The jQuery fadeToggle() method can switch between fadeIn() and fadeOut() methods.

If the element is already faded out, fadeToggle() will add a fade-in effect to the element.

If the element is already faded in, fadeToggle() will add a fade-out effect to the element.

Syntax:

$(selector).fadeToggle(speed,callback);

Optional speed The parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

Optional callback The parameter is the name of the function to be executed after the fading is completed.

The following examples demonstrate the fadeToggle() method with different parameters:

Example

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
);

Try It Yourself

jQuery fadeTo() method

The jQuery fadeTo() method allows for a transition to a given opacity (a value between 0 and 1).

Syntax:

$(selector).fadeTo(speed,opacity,callback);

The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The required opacity parameter in the fadeTo() method sets the fade-in and fade-out effect to the given opacity (a value between 0 and 1).

The optional callback parameter is the name of the function to be executed after the function is completed.

The following examples demonstrate the fadeTo() method with different parameters:

Example

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
);

Try It Yourself

jQuery Effects Reference Manual

For a comprehensive overview of jQuery effects, please visit our jQuery Effects Reference Manual.