jQuery fadeOut() example

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


  • 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>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        $(document).ready(function() {
            $("button").click(function() {


    <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>


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">

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


        If you click on this paragraph you'll see it just fade away.

        $("p").click(function() {


Try it Yourself - Copy paste code in Online HTML Editor to see the result


Free Spring Boot Tutorial - 5 Hours Full Course

Watch this course on YouTube at Spring Boot Tutorial | Fee 5 Hours Full Course