jQuery fadeTo() Effect

The jQuery fadeTo effect adjust the opacity of the selected element. It allows fading to a given opacity (value between 0 and 1).

Syntax of fadeTo() effect

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

The selector is the element on which fadeTo 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 completion. The opacity parameter specifies fading to a given opacity (between 0 and 1 value).

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").fadeTo('slow', 0.5);
});
})(jQuery);
</script>

Output of the above code

In the above example, when the user click on the 'Start Fading' button, the opacity of the div box of 'demo' id get adjusted according to the given fadeTo effect.