March 22, 2025
JQuery Animation with slideDown(), slideUp(), slideToggle() methods
jQuery provides built-in animation effects to show and hide elements with smooth transitions. The three most commonly used methods for sliding animations are slideDown(), slideUp(), slideToggle().
slideDown() method
The slideDown() method slowly increases the height of a HTML element to make it's CSS property visible.
slideUp() method
slideUp() method hides the HTML elements in the jQuery object by animating their height to 0 and finally setting the CSS style display property to “none”.
slideToggle() method
slideToggle() toggles the visibility (show/hide property) of a HTML element using a slide
up or slide down animation. All these methods accepts the optional duration and callback arguments (or the options object argument).
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#showButton").click(function(){
$("#divbox").slideDown("slow");
});
$("#hideButton").click(function(){
$("#divbox").slideUp("fast");
});
$("#toggleButton").click(function(){
$("#divbox").slideToggle("medium");
});
});
</script>
<style>
#divbox {
display: none;
width: 100px;
height: 600px;
background: red;
padding-top: 30px;
}
</style>
</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>