Skip to content
Related Articles

Related Articles

jQuery | fadeIn() Method
  • Last Updated : 19 Feb, 2019
GeeksforGeeks - Summer Carnival Banner

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:
    • “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=
        </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=
        </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:

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :