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.
