What is the purpose of fadeToggle() method in JQuery ?

What is the purpose of fadeToggle() method in JQuery ?

Last Updated : 19 Jul, 2024

In this article, we will see how to create a fadeToggle effect using jQuery. The fadeToggle effect can be created using fadeToggle() method.

The fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. If elements are faded in, fadeToggle() will fade out. If elements are faded out, fadeToggle() will fade in.

Syntax:

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

In the below example, first we create a div of size 250px X 200px and set its display property to none. Also, created a button that calls fadeToggle() method. When the user clicks on the button, the fadeToggle() method is called and the div element will display and if again the same button is clicked, the div element will disappear.

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">

    <!-- Including jQuery -->
    <script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <style>
        div {
            width: 250px;
            height: 200px;
            display: none;
            background-color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>

        <h3>
            What is the purpose of fadeToggle() 
            method in JQuery?
        </h3>

        <div></div>
        <br>

        <button id="delay">Fade Toggle</button>
    </center>

    <script>
        $(document).ready(function() {
            $('#delay').click(function() {
                $("div").fadeToggle(1000);
            });
        });
    </script>
</body>

</html>

Output:

What is the purpose of fadeToggle() method in JQuery ?

V

vkash8574

Improve

Article Tags :

Similar Reads

What is the use of delay() method in jQuery ?

In this article, we will see how to use the delay() method and why to use it in jQuery. The delay() method is used to set a timer to delay the execution of the next item in the queue. Syntax: $(selector).delay(para1, para2); In the below example, first, we create a div of size 250px X 200px and set

What is the use of delegate() method in jQuery ?

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax inte

Explain the purpose of animate() method in jQuery

Then animate() method available in jQuery could be used for creating an interactive UI for our webpages. We use the animate() method to perform a custom animation of a set of CSS properties. The animate() method won't be able to animate string values, for example, we can't animate the "background-co

What is the use of css() method in jQuery ?

In this article, we will see how to use css() method to set the styles on elements dynamically using jQuery. The css() method is used to change the style property of the selected element. basically, The CSS() method is used to get the value of a certain CSS property that has been applied to a specif

What is the use of ready() function in jQuery ?

In this article, we will see how to use ready() function provided by the jQuery library. The ready() function is used to execute some javascript code only when the HTML DOM is fully loaded. We should not manipulate the DOM until it is fully loaded. ready() method comes very handy to detect when the