June 21, 2025
JQuery Animation with show(), hide(), toggle() methods
In jQuery, animation and visual effects can be achieved using the show(), hide(), and toggle() methods. To add animation, you pass a duration parameter to these methods, which controls how long it takes to show or hide the element. The toggle() method combines the functionality of both show() and hide(). It checks the visibility of the element—if it is hidden, it shows it; if it is visible, it hides it.
show() method
show() method makes a hidden HTML element visible. To add animation we need to provide duration argument. which controls how long it takes to show HTML element.
hide() method
hide() method makes an HTML element hidden. To add animation we need to provide duration argument. which controls how long it takes to hide HTML element.
toggle() method
The toggle() method combines the functionality of both show() and hide(). It checks the visibility of the element—if it is hidden, it shows it; if it is visible, it hides it.
show(), hide() & toggle() 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="btnshow">show</button>
<button id="btnhide">hide</button>
<button id="btntoggle">toggle</button>
<script>
$(document).ready(function () {
$("#btnshow").click(function(){
$("#divText").show(1000);
});
$("#btnhide").click(function(){
$("#divText").hide(1000);
});
$("#btntoggle").click(function(){
$("#divText").toggle(1000);
});
});
</script>
</body>
</html>