jQuery fadeToggle()

The jQuery fadeToggle() method is used to switch between the fadeIn and fadeOut states.

  • If the HTML element is hidden or already faded out, fadeToggle() method makes them fade in.
  • If the HTML element is visible or already faded in, fadeToggle() method makes them fade out.

In this tutorial, you will learn about jQuery fadeToggle() method, its syntax and usage, with examples.

Syntax – jQuery fadeToggle()

Following is the syntax to use jQuery fadeToggle() method

1. jQuery fadeToggle – Default

To fade out a selected HTML Element with default timing,

</>
Copy
 $("htmlElement").fadeToggle();

2. jQuery fadeToggle – slow/fast

You can also provide a “slow” or “fast” argument to the fadeToggle() method to make the fade-in/fade-out process slow or fast respectively.

</>
Copy
$("htmlElement").fadeToggle("slow");
$("htmlElement").fadeOut("fast");

3. jQuery fadeToggle – Time in milliseconds

To control the timing precisely, you can provide time in milliseconds as the argument to jQuery fadeOut() method.

</>
Copy
$("htmlElement").fadeToggle(4000); // for 4000 milliseconds

4. jQuery fadeToggle – Callback Function

You can also provide an optional callback function as second argument to fadeToggle() method, to execute when the fade in or fade out effect is completed on the HTML element.

</>
Copy
$("htmlElement").fadeToggle(4000, function(){ alert("Fading completed.") }); // for 4000 milliseconds

Examples – jQuery fadeToggle()

The following examples help you understand the usage of jQuery fadeToggle() method.

1. Example – Basic jQuery fadeToggle()

Following example illustrates the basic usage of jQuery fadeToggle() method.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#fadeToggleBtn").click(function(){
  $("#div1").fadeToggle();
 });
});
</script>
</head>
<body>

<p>jQuery fadeToggle() example</p>

<button id="fadeToggleBtn">Click to toggle fading effect</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery fadeToggle - Default</a>
</div><br>

</body>
</html>

2. Example – jQuery fadeToggle(“slow”), fadeToggle(“fast”)

You can provide one of the two options “slow”, “fast” to control the speed of the effect.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#fadeToggleBtn").click(function(){
    $("#div1").fadeToggle("slow");
    $("#div2").fadeToggle("fast");
 });
});
</script>
</head>
<body>

<p>jQuery fadeToggle() example</p>

<button id="fadeToggleBtn">Click to fading toggle effect</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery fadeToggle - "slow"</a>
</div><br>
<div id="div2" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery fadeToggle - "fast"</a>
</div>
</body>
</html>

3. Example – jQuery fadeToggle(time_in_milliseconds)

You can control the fading speed at the precision of milliseconds. Provide a value in milliseconds as first argument.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#fadeToggleBtn").click(function(){
    $("#div1").fadeToggle(4000);
    $("#div2").fadeToggle(1000);
 });
});
</script>
</head>
<body>

<p>jQuery fadeToggle() example</p>

<button id="fadeToggleBtn">Click to fading toggle effect</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery fadeToggle - 4000 milliseconds</a>
</div><br>
<div id="div2" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery fadeToggle - 1000 milliseconds</a>
</div>
</body>
</html>

4. Example – jQuery fadeToggle with Callback function

Callback function is an optional second argument. The callback function is called when the fading in/out effect is completed. In the following example, we have provided a callback function with alert statement inside the body. You can provide your own statements inside the callback function.

</>
Copy
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $("#fadeToggleBtn").click(function(){
  $("#div1").fadeToggle(4000, function(){
      alert("Fading completed.");
    });
 });
});
</script>
</head>
<body>

<p>jQuery fadeToggle() example</p>

<button id="fadeToggleBtn">Click to fading toggle effect</button><br><br>

<div id="div1" style="width:100%;height:80px;background-color:yellow;text-align:center;">
<a style="line-height:80px;">Learn jQuery fadeToggle with Callback function</a>
</div>
</div>
</body>
</html>

Conclusion

In this jQuery Tutorial, we have learnt jQuery fadeToggle() method : Syntax and Usage with examples.