.fadeToggle() Effect in Jquery

Description:

jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. If the selected/matched elements are fadedIn then the fadeToggle will make them faded out. And if the selected elements are fadedOut then the fadeToggle will make them fadeIn.

Syntax

.fadeToggle(

[duration ] [, easing ] [, complete ] )

Ex : $(“#div”).fadeToggle(“slow”);

Duration/speed	It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400)
Easing	It specifies the easing function to be used for transition (default value: swing).
Callback	A function to call once the animation is complete.

Example:

From the below code, the “divFadeBox” been visible during the page load. After clicking “divButton” the click event been triggered and the fadeToggle() will be executed and the box will be disappear. For more explanation see below output section

<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script type="text/javascript">

 $(document).ready(function () {
 $("#divButton").click(function () {
 $("#divFadeBox").fadeToggle();
 });
 });
 

 </script>
</head>
<body>
 </br>
 <button id="divButton">Click to fade Toggle boxes</button><br><br>
 <div id="divFadeBox" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

<html>

<head>

$(document).ready(function () {

$("#divButton").click(function () {

$("#divFadeBox").fadeToggle();

});

</script>

</head>

<body>

</br>

<button id="divButton">Click to fade Toggle boxes</button><br><br>

</body>

</html>

Output:

After clicking the “Click to fade Toggle boxes” button, then the blue box will be disappear if it is in visible state else it will be appear if it is in hide like shown below.

.fadeToggle() Effect in Jquery