jQuery sliding effect example

In this article, we will describe on sliding effects. There are three slide effects available in jQuery. So let's start from slideDown() method.

jQuery slideDown() method

jQuery slideDown() method is used to show hidden element in down slidding effect.

Syntax:

$(selector).slideDown(duration, callback);

Parameters:

duration is string 'slow', 'fast' or milliseconds

callback is a optional function which executes after the slideDown effect completes.

Example:

$('.normal').slideDown();
$('#slow').slideDown('slow');
$('div').slideDown(1000, function() {
    alert('slideDown effect completed.');
});

jQuery slideUp() method

jQuery slideUp() method is used to hide element in up slidding effect.

Syntax:

$(selector).slideUp(duration, callback);

Parameters:

duration is string 'slow', 'fast' or milliseconds

callback is a optional function which executes after the slideUp effect completes.

Example:

$('.normal').slideUp();
$('#slow').slideUp('slow');
$('div').slideUp(1000, function() {
    alert('slideUp effect completed.');
});

jQuery slideToggle() method

jQuery slideToggle() method hides and shows element in slidding effect. If the element is hidden, it will create slideDown effect else it will create slideUp effect.

Syntax:

$(selector).slideToggle(duration, callback);

Parameters:

duration is string 'slow', 'fast' or milliseconds

callback is a optional function which executes after the slideToggle effect completes.

Example:

$('.normal').slideToggle();
$('#slow').slideToggle('slow');
$('div').slideToggle(1000, function() {
    alert('slideToggle effect completed.');
});

I hope it will help you.