Open In App

jQuery fadeIn() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.

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>
  
    <!-- jQuery script of fadeIn() method -->
    <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>
  
    <!-- jQuery script of fadeIn() method -->
    <script>
        $(document).ready(function () {
            $("#btn").click(function () {
                $("#Outer").fadeIn("swing");
            });
        });
    </script>
</body>
  
</html>


Output: 

 



Last Updated : 27 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads