The jQuery method of .fadeOut() will decrease the opacity of the matching element or elements to an opacity of 0 and then add the nline property of display: none

It is often paired with the .fadeIn() method which will add the inline property of display: block and then increase its opacity to full opacity. .fadeIn() will cause an element that is hidden from the DOM to take form and this can effect the layout of the page.

The duration of the fading can be set to "slow" or "fast" or to milliseconds. The default duration is "400", or 4/10th of a second.

Easing effects can also be applied to .fadeIn() and .fadeOut() if the easing plugin has been linked to in the <head> section of the document.

Another parameter that can be added inside the parentheses for .fadeIn() and .fadeOut() is to call another function when the fading is complete.


An example of .fadeIn() and .fadeOut():

    $(".blueball").fadeIn(2000, "easeOutBounce");


<div id="balls">
    <div class="blueball"></div>
    <div class="blueball"></div>
<button id="fadein">FadeIn</button><button id="fadeout">FadeOut</button>

The result: