In this article we will explain how to  hide elements using fadeOut() in jQuery or What is fadeOut() method in jQuery or why use fadeOut() method in jQuery with example.


The jQuery fadeOut() method is used to fade Out all matched elements. It’s change the opacity to 0 of selected elements , from visible to hidden (fading effect) and set the inline style display:none.


$(selector).fadeOut(speed ,callback) 

Let’s see simple jQuery fadeOut() method with Example:

<!DOCTYPE html>
<html xmlns="">
    <title>Example of jQuery fadeOut method</title>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
    <button>Click to fade Out box</button><br><br>
    <div id="div1" style="width:400px;height:80px;background-color:red;"></div><br>

In above example we have a “div” and button when we click on button then “div” will be  hide.

 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like