jQuery fadeOut() example

The jQuery fadeOut() method is used to fade out a visible element.

Syntax

$(selector).fadeOut(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 fadeOut() 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").fadeOut();
                $("#div2").fadeOut("slow");
                $("#div3").fadeOut(3000);
                $("#div4").fadeOut(100);
            });
        });
    </script>
</head>

<body>

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

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

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

</body>

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

Example 2

Animates all paragraphs to fade out, completing the animation within 600 milliseconds.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>fadeOut demo</title>
    <style>
        p {
            font-size: 150%;
            cursor: pointer;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <p>
        If you click on this paragraph you'll see it just fade away.
    </p>

    <script>
        $("p").click(function() {
            $("p").fadeOut("slow");
        });
    </script>

</body>

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

References

Comments