jQuery sliding effect example

In a previous example, we have see how to create different fade effects using jQuery. 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.');
});

Here is demo example for slideDown() effect.

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.');
});

You can check here demo example for slideUp() effect.

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.');
});

Find the demo example for slideToggle() effect.

Tags:

Was this article helpful?

0 out of 0 person found this article helpful.

Leave a comment

Or

No Comment