fadeIn() Effect in Jquery

Thiyagu

8 years ago

Description:

Display matched elements by fading them to opaque. In simple word, its animates the opacity for the matched elements.

Syntax

.fadeIn(

[duration ] [easing] [callback] )

$(“#div”).fadeIn(“slow”);

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)

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.

<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>

<html>

<head>

$(document).ready(function () {

$("#divButton").click(function () {

$("#divFadeBox").fadeIn();

});

</script>

</head>

<body>

</br>

<button id="divButton">Click to fade in boxes</button><br><br>

</body>

</html>

Output:

After clicking “Click to fade in boxes” button, then the blue box will be fadeIn as shown below.

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>

<html>

<head>

$(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>

</body>

</html>

Output

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‘);