---
title: "Expain the fade toggle method in JQuery with example."  
description: "Expain the fade toggle method in JQuery with example."  
author: "Ethan Karla"  
published: 2021-07-28  
canonical: https://answers.mindstick.com/qa/93794/expain-the-fade-toggle-method-in-jquery-with-example  
category: "web application"  
tags: ["web development services", "web application development", "web design and publishing"]  
reading_time: 2 minutes  

---

# Expain the fade toggle method in JQuery with example.

Expain the fade [toggle method in JQuery](https://answers.mindstick.com/qa/93791/what-are-the-toggle-method-in-jquery-with-example) with example.

## Answers

### Answer by Ravi Vishwakarma

**jQuery fadeToggle()** jQuery's fadeToggle() [method](https://www.mindstick.com/articles/23411/the-most-effective-method-to-find-the-perfect-small-business-phone-system-for-your-business) is used for fadeIn() and fadeOut(). If the element is visible for some time then it will be hidden and if it is hidden for some time then it will show

```
Syntax:
$(selector).fadeToggle();
$(selector).fadeToggle(speed,callback);
```

> Speed and callback is an optional parameter. Speed specifies the delay of showing elements these possible vales are 'slow', 'fast' and milliseconds. Callback function to be called after completion of fadeIn() or fadeOut(). We also put true and false value for showing and hiding element respectively.

```
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
    $(document).ready(function () {
        $('button').click(function () {
            $('#div1').fadeToggle();
            $('#div2').fadeToggle('slow');
            $('#div3').fadeToggle(2000);
            $(this).text() == 'Click to fadeIn' ? $(this).text('Click to fadeOut') : $(this).text('Click to fadeIn') ;
        });
    });
</script>
</head>
<body>

<button>Click to fadeIn</button><br><br>
<div id='div1' style='width:80px;height:80px;background-color:pink;'></div>
<br>
<div id='div2' style='width:80px;height:80px;background-color:red;'></div>
<br>
<div id='div3' style='width:80px;height:80px;background-color:black;'></div>
</body>
</html>
```

![Expain the fade toggle method in JQuery with example.](https://answers.mindstick.com/questionanswer/e6a8c263-b0ed-4100-a21e-489ef3513827/images/dc2417c4-262d-4670-b88a-930e04603cfc.png)\


---

Original Source: https://answers.mindstick.com/qa/93794/expain-the-fade-toggle-method-in-jquery-with-example

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
