jQuery fadeIn() example

The jQuery fadeIn() method is used to fade in a hidden element.

Syntax

$(selector).fadeIn(speed,callback);
  • The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
  • The optional callback parameter is a function to be executed after the fading completes.

Example 1

The following example demonstrates the fadeIn() method with different parameters:
<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(1000);
                $("#div4").fadeIn(5000);
            });
        });
    </script>
</head>

<body>

    <p>Demonstrate fadeIn() with different parameters.</p>

    <button>Click to fade in boxes</button><br><br>

    <div id="div1" style="width:180px;height:100px;display:none;background-color:red;"></div><br>
    <div id="div2" style="width:180px;height:100px;display:none;background-color:green;"></div><br>
    <div id="div3" style="width:180px;height:100px;display:none;background-color:blue;"></div>
    <div id="div4" style="width:180px;height:100px;display:none;background-color:black;"></div>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Example 2

Animates hidden divs to fade in one by one, completing each animation within 600 milliseconds.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>fadeIn demo</title>
    <style>
        span {
            color: red;
            cursor: pointer;
        }

        div {
            margin: 3px;
            width: 80px;
            display: none;
            height: 80px;
            float: left;
        }

        #one {
            background: #f00;
        }

        #two {
            background: #0f0;
        }

        #three {
            background: #00f;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <span>Click here...</span>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>

    <script>
        $(document.body).click(function() {
            $("div:hidden").first().fadeIn("slow");
        });
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Reference

Comments