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,
$("htmlElement").fadeToggle();
2 jQuery fadeToggle slowfast
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.
$("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.
$("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.
$("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.
<!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 fadeToggleslow, fadeTogglefast
You can provide one of the two options “slow”, “fast” to control the speed of the effect.
<!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 fadeToggletimeinmilliseconds
You can control the fading speed at the precision of milliseconds. Provide a value in milliseconds as first argument.
<!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.
<!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.