jQuery fadeToggle() Method

Quiz

The jQuery fadeToggle() method is used to toggle the visibility of selected elements by fading them in or out. If the element is visible, it fades out; if the element is hidden, it fades in.

Syntax

Following is the syntax of fadeToggle() method −

$(selector).fadeToggle(speed,easing,callback)

Parameters

Here is the description of the above syntax −

speed: Specifies the duration of the animation in milliseconds or as a string ("slow" or "fast"). If omitted, the default duration is 400 milliseconds.
easing: Defines the easing function for the transition, such as "swing" or "linear". This parameter affects the speed of the animation. If omitted, the default is "swing".
callback: A function to be executed once the animation completes. This function runs after the fade in or fade out effect has finished.

Example 1

In the following example, we are using the jQuery fadeToggle() method without parameters. Clicking the button toggles the visibility of the #myElement div −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggleButton").click(function(){
                $("#myElement").fadeToggle();
            });
        });
    </script>
    <style>
        #myElement {
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <button id="toggleButton">Toggle Fade (Default)</button>
    <div id="myElement"></div>
</body>
</html>

After executing, the div will fade in or out with the default duration and easing.

Example 2

Here, the fadeToggle() method is used with the "slow" parameter for duration. Clicking the button toggles the visibility of the #myElement div with a slow fade effect −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggleButton").click(function(){
                $("#myElement").fadeToggle("slow");
            });
        });
    </script>
    <style>
        #myElement {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <button id="toggleButton">Toggle Fade (Slow)</button>
    <div id="myElement"></div>
</body>
</html>

After executing, the div will fade in or out slowly when the button is clicked.

Example 3

The fadeToggle() method is used with a duration of 1000 milliseconds and "linear" easing. Clicking the button toggles the visibility of the #myElement div with a linear fade effect −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggleButton").click(function(){
                $("#myElement").fadeToggle(1000, "linear");
            });
        });
    </script>
    <style>
        #myElement {
            width: 100px;
            height: 100px;
            background-color: green;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <button id="toggleButton">Toggle Fade (Linear)</button>
    <div id="myElement"></div>
</body>
</html>

After executing, he div will fade in or out over 1000 milliseconds with a linear easing effect when the button is clicked.

Example 4

The fadeToggle() method is used with a duration of 500 milliseconds and a callback function. Clicking the button toggles the visibility of the #myElement div, and an alert is shown when the fade transition is complete −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggleButton").click(function(){
                $("#myElement").fadeToggle(500, function() {
                    alert("Fade transition completed!");
                });
            });
        });
    </script>
    <style>
        #myElement {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <button id="toggleButton">Toggle Fade (Callback)</button>
    <div id="myElement"></div>
</body>
</html>

After executing, the div will fade in or out over 500 milliseconds, and an alert message will appear once the fade transition is complete.

jquery_ref_effects.htm

Print Page