June 21, 2025
JQuery Animation with fadein(), fadeout() methods
In jQuery, we perform basic animation of visual effects with using fadein() and fadeout() methods. For performing animation these functions use opacity property of CSS to display or hide a HTML element. These functions accepts optional arguments, as speed and call back function. In detail function is described below:
fadein() method
The fadeIn() method is used to gradually show HTML elements with the help of CSS opacity property. With using speed argument fadein function change opacity parameter 0 to 1 and provide animation effect.
fadeout() method
The fadeOut() method is used to gradually hide HTML elements with the help of CSS opacity property. As the fade-out effect is complete it hides HTML element with making display property as none.
fadein() & fadeout() methods example
<html>
<head>
<title>Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="divText">Hello all</div>
<button id="btnfadein">fadein</button>
<button id="btnfadeout">fadeout</button>
<script>
$(document).ready(function () {
$("#btnfadein").click(function(){
$("#divText").fadeIn();
});
$("#btnfadeout").click(function(){
$("#divText").fadeOut();
});
});
</script>
</body>
</html>