jQuery - Toggle between Fade in and Fade out

Toggle between Fade in and Fade out using jQuery

Selected some HTML elements in the document, toggle between Fade in and Fade out effects for the elements using jQuery.

Solution

To toggle between fade in and fade out effects for selected HTML elements using jQuery, call fadeToggle() function on the selected elements.

For example, the syntax to toggle between fade in and fade out for paragraphs in the document is

$("p").fadeToggle();

Programs

1. Toggle between Fade in and Fade out for all paragraphs in the document.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
      function myAction() {
        $("p").fadeToggle();
      }
    </script>
  </head>
  <body>
    <button onclick="myAction()">Fade in/out paragraphs</button>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </body>
</html>

2. Toggle between Fade in and Fade out for all link elements in the document.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
      function myAction() {
        $("a").fadeToggle();
      }
    </script>
  </head>
  <body>
    <button onclick="myAction()">Fade in/out links</button>
    <p>Welcome to <a href="#jquery">jQuery</a></p>
    <p>Welcome to <a href="#jquery">jQuery 3</a></p>
  </body>
</html>

JavaScript Code