---
title: "Explain about fadeout method in JQuery  also expain the example."  
description: "Explain about fadeout method in JQuery  also expain the example."  
author: "Ethan Karla"  
published: 2021-07-28  
canonical: https://answers.mindstick.com/qa/93793/explain-about-fadeout-method-in-jquery-also-expain-the-example  
category: "web application"  
tags: ["web application development", "web development"]  
reading_time: 2 minutes  

---

# Explain about fadeout method in JQuery  also expain the example.

[Explain](https://yourviews.mindstick.com/view/86025/content-created-for-humans-not-for-bots-explain-this-statement) about fadeout [method in JQuery](https://www.mindstick.com/forum/156670/has-method-in-jquery) also expain the example.

## Answers

### Answer by Ravi Vishwakarma

**jQuery fadeOut() [Method](https://www.mindstick.com/articles/23411/the-most-effective-method-to-find-the-perfect-small-business-phone-system-for-your-business)** The jQuery fadeOut() method is used to fade out a visible element.

```
Syntax:
$(selector).fadeOut(speed);
$(selector).fadeOut(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 fadeOut().

```
<!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').fadeOut();
                $('#div2').fadeOut('slow');
                $('#div3').fadeOut(3000);
            });
        });
    </script>
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius:25px;
            text-align:center;
            color:white;
        }
    </style>
</head>
<body>
    <button>Click to fadeOut boxes</button><br>
    <br>
    <div id='div1' style='background-color:black;'>
        black
    </div>
    <br>
    <div id='div2' style='background-color:blue;'>
        blue
    </div>
    <br>
    <div id='div3' style='background-color:red;'>
        red
    </div>
</body>
</html>
```

![Explain about fadeout method in JQuery  also expain the example.](https://answers.mindstick.com/questionanswer/59566e72-5453-4d99-8514-d4c2e82716ca/images/ace60d90-ea7d-420b-b225-ebd7efe1fcf0.png)\


---

Original Source: https://answers.mindstick.com/qa/93793/explain-about-fadeout-method-in-jquery-also-expain-the-example

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
