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

Last Updated : 28 Sep, 2021

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>