jQuery fadeIn() Effect

The jQuery fadeIn() effect displays the selected element by fading them to opaque.

Syntax of fadeIn() Effect

$(selector).fadeIn(speed, callback) 

The selector is the element on which fadeIn() 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. Both speed and callback are optional parameters.

Example

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

<div id="demo" class="demobox"> Demo Box </div>
<button id="btn">Start Fading</button>

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

Output of the above code

Demo Box


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



Read more articles


General Knowledge



Learn Popular Language