Sliding effects allow us to smoothly hide or reveal an element. Sliding effects are implemented as methods slideUp(), slideDown() and slideToggle().
If the slideUp method hides the element in the upward direction, as if sliding, then the slideDown method smoothly reveals the hidden element in the downward direction. The slideToggle method combines the action of both methods: if the element is hidden, it is expanded, if it is expanded, it is hidden.
These methods have the same usage forms:
slideUp/slideDown/slideToggle(): method without parameters
slideUp/slideDown/slideToggle([duration] [, easing][, complete]). The parameter duration specifies how long the hiding element will last. Its default value is 400 milliseconds.
A parameter easing that accepts the name of the animation easing function as a string. Its default value is “swing”. You can also use the ‘slow’ and values ‘fast’, which correspond to the effect duration of 600 and 200 milliseconds.
The parameter complete represents the function that the method will call when the animation completes.
Let’s say we have two buttons. By clicking on the first button, it will slowly hide, and by clicking on the second button, the hidden first button will be revealed:
<button id="slideUp">Hide</button>
<button id="slideDown">Expand</button>
<script type="text/javascript">
$(function() {
$('#slideUp').click(function(){
$(this).slideUp();
});
$('#slideDown').click(function(){
$('#slideUp').slideDown();
});
});
</script>
The slideToggle method can be applied in a similar way:
$(function() {
$('#slideUp').click(function(){
$(this).slideToggle('slow');
});
$('#slideDown').click(function(){
$('#slideUp').slideToggle(2000);
});
});