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>