jQuery | fadeIn() Method

19 Feb, 2019
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”
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:“swing”“linear”
“swing”
“linear”
Callback: It is optional parameter. The callback function is executed after fadeIn() method is completed.
Below examples illustrate the fadeIn() method in jQuery:
Example 1: This example describes fadeIn() method with speed 1000 milliseconds.
<!DOCTYPE html>  <html>      <head>         <title>             fadeIn() Method in jQuery        </title>                  <style>            #Outer {                border: 1px solid black;                padding-top: 40px;                height: 140px;                background: green;                display: none;            }        </style>                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">        </script>    </head>          <body style = "text-align:center;">                    <div id= "Outer">            <h1 style = "color:white;" >                  GeeksForGeeks              </h1>          </div><br>                  <button id = "btn">             Fade In        </button>                   <!-- jQuery script of fadeIn() method -->        <script>             $(document).ready(function() {                $("#btn").click(function() {                    $("#Outer").fadeIn(1000);                });            });        </script>     </body>  </html> 
Output:Before click on the button:After click on the button:
Example 2: This example describes fadeIn() method with easing “swing”.
<!DOCTYPE html>  <html>      <head>         <title>             fadeIn() Method in jQuery        </title>                  <style>            #Outer {                border: 1px solid black;                padding-top: 40px;                height: 140px;                background: green;                display: none;            }        </style>                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">        </script>    </head>          <body style = "text-align:center;">                    <div id= "Outer">            <h1 style = "color:white;" >                  GeeksForGeeks              </h1>          </div><br>                  <button id = "btn">             Fade In        </button>                   <!-- jQuery script of fadeIn() method -->        <script>             $(document).ready(function() {                $("#btn").click(function() {                    $("#Outer").fadeIn("swing");                });            });        </script>     </body>  </html> 
Output:Before click on the button:After click on the button:
jQuery-Effects
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to add options to a select element using jQuery?
How to fetch data from JSON file and display in HTML table using jQuery ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?