jQuery fadeOut() method

jQuery fadeOut() method fades out the visible elements of website, for example, <div> or <p> etc. that may contain text, images or other content. It slowly changes the opacity of the given element from visible to hidden.

Syntax of fadeOut()

This is how you may use the fadeOut jQuery method:

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

Where:

Selector can be an element like div, p, etc.

Speed = Optional parameter that specifies the fadeOut speed with possible values of

  •  “slow”
  • “fast”
  •  Or value in milliseconds

Callback = after fadeOut() method is completed, an optional callback function to perform certain action can be given.

A fadeOut example with the fast value

In the first example of using jQuery fadeOut method, I am using “fast” value for the fading effect. For that, three boxes are created and styled with CSS and each of the boxes is given “fast” value in the script section:

Experience this example online

The code:

Using slow value example

For this example, the “slow” value is used in the fadeOut method. Have a look:

Experience this example online

The example of using duration in milliseconds

Similarly, you may use the duration in milliseconds in the fadeOut method. In this example, I used 1000, 3000 and 7000 values for three boxes. That means, one, three and seven seconds, respectively:

Experience this example online

The example of using callback function

As shown in the syntax of the fadeOut function, a callback function can be used in fadeOut method. For demonstrating that, again we have three boxes with duration of fading effect set in milliseconds.

As the first box’s duration is completed, an alert will trigger that is placed inside the callback function. The second box duration is set as five seconds and its alert will display and so for the third box.

Experience this example online

Also see jQuery fadeIn() method | jQuery fadeToggle method