Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


$(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.




<!DOCTYPE html>
<html lang="en">
    <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="
        div {
            width: 250px;
            height: 200px;
            display: none;
            background-color: green;
        <h1 style="color: green;">
            What is the purpose of fadeToggle() 
            method in JQuery?
        <button id="delay">Fade Toggle</button>
        $(document).ready(function() {
            $('#delay').click(function() {


My Personal Notes arrow_drop_up
Last Updated : 28 Sep, 2021
Like Article
Save Article
Similar Reads
Related Tutorials