Animation

Sliding content down into place is a nice feature that can make an interface entertaining and engaging. But more importantly it can be used to reduce clutter when there is a lot of content to be shown. So it is also important to hide content when it's not in use. But the hiding of the content should complement the showing routine. jQuery provides three simple animation routines for this purpose - the .slideDown(), .slideUp(), and .slideToggle() methods.

The three methods all take the same arguments - a speed, and a callback. Both of these are optional.

jQuery has the .hide() and .show() methods for hiding and showing content respectively. These essentially set the CSS display property to none/block. But this doesn't help when you want something to fade in.

The good news is that these methods take an argument to indicate how long the hide/show process should take.

$("#mydiv1").hide("slow");
$("#mydiv2").hide(3000);
$("#mydiv3").show("fast");
$("#mydiv4").show("2000");