Slide down elements using jQuery

In this lesson, you will learn how to show an already hidden web element by sliding it down and animating its height.

Introduction to Slide down elements in jQuery

The syntax for .slideDown() function is:

.slideDown( [duration ] [, easing function ] [, callback function ] )

The slideDown() function animates the height of the selected element making it 100%. This will make a hidden element visible by sliding it down.

Duration is the first parameter of .slideDown() function and it takes time the animation takes to complete. You can enter the string values such as slow, fast, and normal representing time in milliseconds equal to 600, 200, and 400 milliseconds respectively or numbers representing milliseconds.

jQuery provides a few easing functions which determine the speed of the animation at various points during the animation progression. Easing function linear is used if you need the animation to have a constant speed at all points during the animation. Swing easing function, also the default function for .slideDown() has a slightly fast speed at start and end as compared to the speed at the middle of the animation.

The callback function is a simple jQuery function executed at the end of the animation. It is used to execute more than one animation in a sequence and can be really helpful.

Example of Slide down elements using jQuery

In this example, we have a div with a fixed width/height and a hyperlink. When you click on the hyperlink ‘Show box’ it will display the hidden div by sliding it down. When height reaches to 100% the animation will be completed. There is a callback function which changes the text from ‘Show box’ to ‘Hide box’. This example doesn’t incorporate the hiding functionality which you will learn in the next lesson.

The HTML

<div id="container">
   <div class="box one"></div>
   <p><a href="#" id="anim">Show box</a></p>
</div>

The CSS

* {
	box-sizing: border-box;
}

body {
	font-family: 'Open Sans', sans-serif;
	color: #333;
	font-size: 14px;
}

.box {
	width: 100px;
	height: 100px;
	margin: 2px;
	display: none;
}

.one {
	background-color: #d9eb4b;
}

The jQuery

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
<script>
    $(document).ready(function() {
        $('#anim').click(function() {
            if ($('.box').is(':hidden')) {
                $('.box').slideDown('6000', function() {
                    $('#anim').text("Hide box");
                });
            } else {
                $('.box').slideDown('6000', function() {
                    $('#anim').text("Hide box");
                });
            }
        });
    }); </script>

The .slideDown() function will work only if the element is already hidden. You can hide the element by setting the style property display to none. The slideUp() and slideDown() functions look similar but have opposite animation effects.

Let me know how you have used this effect in your projects in the comments section below.

jQuery slideUp Elements

Tutorial Home

jQuery slideToggle Elements