March 23, 2025
JQuery Animation with fadeIn(), fadeOut() methods
jQuery provides animation effects to show and hide elements with smooth transitions. The three most commonly used methods for animations are fadeIn(), fadeOut() with duration parameter. These methods use opacity property of CSS.
fadeIn() method
The fadeIn() method in jQuery makes a hidden element visible with specifying a duration param, it animates the appearance of the element over that period using CSS opacity property.
fadeOut() method
The fadeOut() method hides HTML element with specifying a duration parameter, it animates the hiding effect over that period using CSS opacity property.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#fadeinButton").click(function(){
$("#divbox").fadeIn(1000);
});
$("#fadeoutButton").click(function(){
$("#divbox").fadeOut(1000);
});
});
</script>
</head>
<body>
<button id="fadeinButton">Show Box</button>
<button id="fadeoutButton">Hide Box</button>
<div id="divbox">Hello, world!</div>
</body>
</html>