The slideDown method

The slideDown method smoothly reveals hidden elements by rolling them down from top to bottom. Elements can be hidden using the slideUp method.

Syntax

Show for a given time, 400ms by default:

.slideDown(duration);

Time can be specified not only in milliseconds, but also using the keywords slow (600ms) and fast (200ms), the higher the value, the slower the animation:

.slideDown('slow' or either 'fast');

If you do not specify parameters, there will be no animation, the elements will be shown instantly:

.slideDown();

You can also pass the smoothing function as the second parameter, and the callback function as the third parameter - it will be triggered after the animation is completed. Both parameters are optional:

.slideDown(duration, [smoothing function], [callback-function office]);

You can pass various options to the method, in the form of a JavaScript object containing key:value pairs:

.slideDown(options);

Such an object can pass the following parameters and functions - duration, easing, queue, specialEasing, step, progress, complete, start, done, fail, always. You can see the description of these parameters for the method animate. For example, let's set the duration and the smoothing function:

.slideDown( {duration: 600, easing: easeInSine} );

Example

Let's smoothly show the hidden paragraph after pressing the button using the slideDown method. By passing the slow keyword, we set the speed to 600ms. After the animation is finished, we output 'Animation complete' to the console:

<button>show text</button>
<p style="display: none">text</p>

$('button').click(function() {
	$('p').slideDown('slow', function() {
		console.log('Animation complete')
	});
});

The slideDown method

Syntax

Example

See also