jQuery Effects: Slide, Fade, and Animate

Introduction:

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.

jQuery provides three commands for sliding elements in and out of view, and all of their names make the functionality fairly self-explanatory. "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. Finally, "slideToggle" intelligently alternates between sliding an element up and sliding it down, each time "slideToggle" is called.

For the sliding effects (and the fading effects we'll cover next), you can provide either the argument 'slow', which is equivalent to 600ms, no argument which is equal to 400ms, or 'fast' which is equivalent to 200ms. You can also specify a custom time length by providing the number of milliseconds you'd like the effect/animation to take.

Here's a functional demo of sliding up, sliding down, and toggling sliding:

HTML:

                 

This content will appear and disappear when the div is slid in and out.





                 
                

JSCODE:

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