jQuery fadeOut() Effect

The jQuery fadeOut hides the selected element by fading them to transparent.

Syntax of fadeOut() Effect

$(selector).fadeOut(speed, callback)

The selector is the element on which fadeOut effect occurs. The speed parameter specifies either in milliseconds or a few predefined strings, slow and fast. The callback function is called after the fading out completion. Both speed and callback parameters are optional.

Example

<style>
.demobox { 
width: 200px; 
height: 150px; 
background-color: #CCFFFF;
border: 4px solid black;
padding: 20px;
}
</style>

<div id="demo" class="demobox"> Hello World!</div>
<button id="btn">Start Fading</button>

<script>
(function( $ ) {
$("button#btn").click(function() {
$("div#demo").fadeOut('slow');
});
})(jQuery);
</script>

Output of the above code

Demo Box

In the above example, when the user click on the 'Start Fading Out' button, the div box of 'demo' id gets transparent according to the given fadeout effect.