March 23, 2025
JQuery Animation with show(), hide(), toggle() methods
jQuery provides animation effects to show and hide elements with smooth transitions. The three most commonly used methods for animations are show(), hide(), toggle() with duration parameter. With duration parameter we can control speed of element's show and hide operation.
show() method
The show() 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 property.
hide() method
The hide() method hides HTML element with specifying a duration parameter, it animates the hiding effect over that period using CSS property.
toggle() method
The toggle() method in jQuery switches between showing and hiding HTML element with specifying a duration parameter, it animates the hiding effect over that period using CSS property.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#showButton").click(function(){
$("#divbox").show("slow");
});
$("#hideButton").click(function(){
$("#divbox").hide("fast");
});
$("#toggleButton").click(function(){
$("#divbox").toggle("medium");
});
});
</script>
</head>
<body>
<button id="showButton">Show Box</button>
<button id="hideButton">Hide Box</button>
<button id="toggleBtn">Toggle Box</button>
<div id="divbox">Hello, world!</div>
</body>
</html>