jQuery fadeToggle()

The jQuery fadeToggle() method fades the selected elements into the visibility, if the elements was previously faded out, and fades the selected elements out of the 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>

Try it

JS Bin on jsbin.com

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, fast value of 200 milliseconds and 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>

Try it

JS Bin on jsbin.com

Please Share