Description:
Display matched elements by fading them to opaque. In simple word, its animates the opacity for the matched elements.
Syntax
.fadeIn( $(“#div”).fadeIn(“slow”);
From the below code, the “divFadeBox” element has been set to display:none. So initially it will not visible during the page load. After clicking “divButton”, the fadeIn() will be executed to the “divFadeBox” element. After clicking “Click to fade in boxes” button, then the blue box will be fadeIn as shown below. Before button click After button click, it will be fade-in with duration of 2000 milli second & swing effect. After fade-in completed, callback method will be executed. Finally “fadein() is now complete” text will be append to the button button as shown below. $(“#divButton”).attr(‘value’, ‘fadeIn() is now Complete‘);
Duration/speed
It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400)
Easing
It specifies the easing function to be used for transition (default value: swing).
Callback
A function to call once the animation is complete.
Example: Without Option(parameter)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#divButton").click(function () {
$("#divFadeBox").fadeIn();
});
});
</script>
</head>
<body>
</br>
<button id="divButton">Click to fade in boxes</button><br><br>
<div id="divFadeBox" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
Output:
Example : With Option(parameter)
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#divButton").click(function () {
$('#divFadeBox').fadeIn(2000, 'swing', function () {
//Execute(callback) function after animation completed.
$("#divButton").attr('value', 'fadeIn() is now Complete');});
});
});
</script>
</head>
<body>
<input id="divButton" type="button" value="Click here to see fadeIn" /><br><br>
<div id="divFadeBox" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
Output
