JavaScript Code


jQuery – Fade out element(s)



Fade out HTML Element(s) using jQuery

Selected some HTML elements in the document, fade out them using jQuery.

Solution

To fade out selected HTML elements using jQuery, call fadeOut() function on the selected elements.

The syntax to fade out paragraphs in the document is

$("p").fadeOut();

Programs

1. Fade out 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").fadeOut();
      }
    </script>
  </head>
  <body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button onclick="myAction()">Fade out paragraphs</button>
  </body>
</html>

2. Fade out 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").fadeOut();
      }
    </script>
  </head>
  <body>
    <p>Welcome to <a href="#jquery">jQuery</a></p>
    <p>Welcome to <a href="#jquery">jQuery 3</a></p>
    <button onclick="myAction()">Fade out links</button>
  </body>
</html>


copyright @2023