In many sites we have seen that when we click on some button it will make some div faded, this will happen with the help of  fadeOut() method in jquery.

If we want some faded div or hidden div to get show, we can do that by using fadeIn() method .

fadeToggle method helps us if we want to fadeOut or fadeIn some div at the same time .

Syntax

$(div to be selected).fadeToggle(speed,callback);

Speed:- In this parameter, we provide a string which defines the duration for which the effect take place  i.e slow,normal or fast .

Duration of effect is specified by an optional speed parameter and values: "slow", "fast", or milliseconds can be taken by it.

Below is the jquery code for using this method:-

$(document).ready(function(){
    $("button").click(function(){
        $("#part1").fadeToggle();
        $("#part2").fadeToggle("slow");
        $("#part3").fadeToggle(2000);
    });
});

Below is the html code:-

<button>Click here</button><br><br>

<div id="part1"></div>
<br>
<div id="part2"></div>
<br>
<div id="part3"></div>

Below is the css for above code:-

#part1{
       width:100px;
       height:100px;
       background-color:grey;
}
#part2{
       width:100px;
       height:100px;
       background-color:red;
}
#part3{
       width:100px;
       height:100px;
       background-color:blue;
}