The jQuery method of .fadeIn() will add the inline property of display: block and then increase the opacity of the specified element or elements. If the element is already at full opacity, the .fadeIn() method will have no effect. It is often paired with the .fadeOut() method which will take the element to an opacity of 0 and add the inline property of display: none. .fadeOut() will make it so the element is hidden from the DOM 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():

$("#fadeout").click(function(){
    $(".blueball").fadeOut(2000);
});
$("#fadein").click(function(){
    $(".blueball").fadeIn(2000, "easeOutBounce");
});

The HTML:

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

The result: