how to Toggle between fading in and fading out different boxes

The jQuery fadeToggle() method effect toggles between the fadeIn() and fadeOut() methods of the selected element. If the elements are faded out, the fadeToggle() will fade them in and if the elements are faded in, the fadeToggle() will fade them out.

Syntax: $(selector).fadeToggle(speed, easing, callback)

Example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").fadeToggle();
  });
});
</script>
</head>
<body>

<h2>jQuery fadeToggle effect example</h2>
<p>This tutorial is published on beginnersbook.com. This
paragraph will fadeout when the FadeToggle button is clicked and
it will fadein when the same button is clicked again.</p>
<button>FadeToggle</button>
</body>
</html>

Leave a comment Cancel reply