The fadeToggle() method toggles between the fadeIn() and fadeOut() methods.If the elements are faded out, fadeToggle() will fade them in.If the elements are faded in, fadeToggle() will fade them out.Hidden elements will not be displayed at all (no longer affects the layout of the page).
So jQuery fadeToggle() method is used to toggle between the fadeIn() and fadeOut() methods. If the elements are faded in, it will make them faded out and if they are faded out it will make them faded in.
Syntax:
|
$(selector).fadeToggle(speed,easing,callback)
|
Example :
|
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div11").fadeToggle();
$("#div22").fadeToggle("slow");
$("#div33").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed
parameters.</p>
<button>Click me to fade in/out boxes</button><br><br>
<div id="div11" style="width:100px;height:100px;background-color:blue;"></div>
<br>
<div id="div22" style="width:100px;height:100px;background-color:purple;"></div>
<br>
<div id="div33" style="width:100px;height:100px;background-color:yellow;"></div>
</body>
</html>
|
