jQuery Effects: Slide, Fade, and Animate

jQuery comes with a handful of excellent CSS-based animation effects. This includes sliding elements up and down/into and out of view, fading elements in and out, and performing custom animations of other CSS properties. Let's start with the sliding effects.

"slideUp" slides an element up and out of view,
"slideDown" slides an element down and into view - a common use for these methods is to make a drop-down menu slide down when it's parent link is hovered over, and to have it slide up when a different menu item is being hovered over.
"slideToggle" intelligently alternates between sliding an element up and sliding it down, each time "slideToggle" is called.

HTML Code

<div id="slideMe">
    This content will appear and disappear when the div is slid in and out.
</div>
<!-- One button for each slide command -->
<input id="btnSlideUp" value="Slide Up" type="button">
<input id="btnSlideDown" value="Slide Down" type="button">
<input id="btnSlideToggle" value="Slide Toggle" type="button">               

JavaScript Code

$('#btnSlideUp').click(function() {
    $('#slideMe').slideUp('slow');
});
$('#btnSlideDown').click(function() {
    $('#slideMe').slideUp();
});
$('#btnSlideToggle').click(function() {
    $('#slideMe').slideToggle('fast');
});

~banu~