Fade in HTML Element(s) using jQuery
Selected some HTML elements in the document, fade in them using jQuery.
Solution
To fade in selected HTML elements using jQuery, call fadeIn() function on the selected elements.
Only hidden elements can show the fade in animation.
For example, the syntax to fade in paragraphs in the document is
$("p").fadeIn();Programs
1. Fade in 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").fadeIn();
}
</script>
</head>
<body>
<button onclick="myAction()">Fade in paragraphs</button>
<p hidden>This is a paragraph.</p>
<p hidden>This is another paragraph.</p>
</body>
</html>2. Fade in 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").fadeIn();
}
</script>
</head>
<body>
<button onclick="myAction()">Fade in links</button>
<p>Welcome to <a href="#jquery" hidden>jQuery</a></p>
<p>Welcome to <a href="#jquery" hidden>jQuery 3</a></p>
</body>
</html>