The jQuery fadeToggle() method fades the selected elements into visibility, if the elements were previously faded out, and fades the selected elements out of visibility if the elements are faded in.
The jQuery fadeToggle() method is used to toggle the elements in between the fadeIn() and fadeOut() methods.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
});
});
</script>
</head>
<body>
<p>Click the button, and I will toggle.</p>
<button>Fade Toggle</button><br><br>
<div id="div1" style="width:40px;height:20px;background-color:red;border-radius:20px"></div>
</body>
</html>
The jQuery fadeToggle() method can also include some other parameters to make the effect of showing the selected elements more specific.
Syntax:
$(selector).fadeToggle(speed, callback);
Speed:
- Speed is an optional parameter that specifies the speed of the delay in the animation (fading out of the selected element), with a default value of 400 milliseconds, a fast value of 200 milliseconds, and a slow value of 600 milliseconds.
- This parameter can also accept a value directly in milliseconds.
Callback:
- Callback is the optional function to be executed once the fadeToggle() method’s execution is complete.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(5000);
});
});
</script>
</head>
<body>
<p>Click the button, and I will toggle.</p>
<button>Fade Toggle</button><br><br>
<div id="div1" style="width:40px;height:80px;background-color:red;border-radius:20px"></div>
<br>
<div id="div2" style="width:40px;height:80px;background-color:yellow;border-radius:20px"></div>
<br>
<div id="div3" style="width:40px;height:80px;background-color:green;border-radius:20px"></div>
</body>
</html>