The fadeIn() method in jQuery is used to change the opacity of selected elements from hidden to visible. The hidden elements will not be display.
Syntax:
$(selector).fadeIn( speed, easing, callback )
Parameters: This method accepts three parameters as mentioned above and described below:
- Speed: It is an optional parameter and used to specify the speed of the fading effect. The default value of speed is 400 millisecond. The possible value of speed are:
- milliseconds
- “slow”
- “fast”
- Easing: It is an optional parameter and used to specify the speed of element to different points of animation. The default value of easing is “swing”. The possible value of easing are:
- Callback: It is optional parameter. The callback function is executed after fadeIn() method is completed.
Example 1: This example describes fadeIn() method with speed 1000 milliseconds.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< title >
fadeIn() Method in jQuery
</ title >
< style >
#Outer {
border: 1px solid black;
padding-top: 40px;
height: 140px;
background: green;
display: none;
}
</ style >
</ head >
< body style = "text-align:center;" >
< div id = "Outer" >
< h1 style = "color:white;" >
GeeksForGeeks
</ h1 >
</ div >< br >
< button id = "btn" >
Fade In
</ button >
< script >
$(document).ready(function () {
$("#btn").click(function () {
$("#Outer").fadeIn(1000);
});
});
</ script >
</ body >
</ html >
|
Output:
Example 2: This example describes fadeIn() method with easing “swing”.
HTML
<!DOCTYPE html>
< html >
< head >
< script src =
</ script >
< title >
fadeIn() Method in jQuery
</ title >
< style >
#Outer {
border: 1px solid black;
padding-top: 40px;
height: 140px;
background: green;
display: none;
}
</ style >
</ head >
< body style = "text-align:center;" >
< div id = "Outer" >
< h1 style = "color:white;" >
GeeksForGeeks
</ h1 >
</ div >< br >
< button id = "btn" >
Fade In
</ button >
< script >
$(document).ready(function () {
$("#btn").click(function () {
$("#Outer").fadeIn("swing");
});
});
</ script >
</ body >
</ html >
|
Output:
Last Updated :
27 Oct, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...