`
jQuery FadeToggle
jQuery fadeToggle() Method
The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If there is any situation where we use fadein and fadeout. You can use fadetoggle method.
- If the elements are faded out, fadeToggle() will fade them in.
- If the elements are faded in, fadeToggle() will fade them out.
Syntax
$(selector).fadeToggle(speed,callback);
-
speed -It specifies the speed of the fadeToggle effect. Default value is 400 milliseconds. Possible values:
- milliseconds
- slow
- fast
-
callback - A function to be executed after the fading method is completed.
The following example demonstrates the fadeToggle() method with different parameters.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box1").fadeToggle();
$("#box2").fadeToggle("slow");
$("#box3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<button>Click to fade Toggle boxes</button><br><br>
<div id="box1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="box2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="box3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>Output
If the elements are faded out, fadeToggle() will fade them in. If the elements are faded in, fadeToggle() will fade them out.
Prev Next