Animación

La animación permite modificar de forma animada un los estilos.

.animate(properties [,duration ] [,easing ] [,complete ] )

Las propiedades son las propiedades CSS, esta es la lista de propiedades animables:

http://www.w3.org/TR/css3-transitions/#animatable-properties-

La duración es un valor en milisegundos o un string:

_default (400 ms) // sin especificar valor
fast (200 ms)
slow (600 ms)

El easing, inica el tipo de suavizado para la animación, el valor por defexto es linear.

ease
linear
ease-in / ease-out
ease-in-out
cubic-bezier(...) http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag

$( "#miID" ).animate({
opacity: 0.25,
height: "100"
}, 5000, "linear", function() {
// Animation complete.
$('#miID').css({
'display' : 'none'
});

http://api.jquery.com/animate/

La animación tiene unos valores predefinidos, como: show, hide o toogle

$("#clickme").click(function(){
$("img").animate({
left:'250px',
opacity:'0.5',
height:'toggle',
width:'150px'
});
});

Las animaciones se oyueden producir como una cola de efectos, escribimos múltiples efectos y se van llamando uno detrás de otro, cuando finaliza el anterior

$("#clickme").click(function(){
$("img").animate({height:'300px',opacity:'0.4'},"slow");
$("img").animate({width:'300px',opacity:'0.8'},"slow");
$("img").animate({height:'100px',opacity:'0.4'},"slow");
$("img").animate({width:'100px',opacity:'0.8'},"slow");
});