Efectos animados con jQuery
Veamos algunas funciones de jQuery para hacer algunas animaciones en nuestros elementos html.
fadeIn(), fadeOut(), fadeTo() y fadeToggle()[editar]
Este es sencillo. Eligiendo con jQuery uno o varios elementos del htmls, podemos hacer que su opacidad pase a 0 haciéndose transparenetes, pero ocupando el hueco, o que pase a 100 haciéndose opaco, todo ello despacito para que se vea como va apareciendo/desapareciendo.
Por ejemplo
// Hace desaparecer todos los párrafos <p>, por defecto en 400 milisegundos
$('p').fadeOut();
// Los hace aparecer, en 400 ms
$('p').fadeIn();
// Les cambia el estado, ocultándolos si están visibles y viceversa, en 400ms
$('p').fadeToggle();
A estos métodos se les puede pasar un parámetro para indicar el tiempo en ms que debe durar la transición. Admite también textos como 'slow' y 'fast' para 600 ms y 200 ms respectivamente.
// Los hace aparecer, en 400 ms
$('p').fadeIn();
// Los hace aparecer, en 200 ms
$('p').fadeIn('fast');
// Los hace aparecer, en 600 ms
$('p').fadeIn('slow');
// Los hace aparecer, en 2000 ms, es decir, 2 segundos
$('p').fadeIn(2000);
fadeTo() hace que el componente vaya a la opacidad que queramos, pero hemos de ponerle el parámetro de tiempo como primer parámetro y la opacidad, entre 0.0 y 1.0 como segundo
// Pone a opacidad 50% en 2 segundos
$('p').fadeTo(2000,0.5);
Tiempo : Opacidad :
La llamada vuelve inmediatamente aunque el efecto no haya terminado, por lo que nuestro código javascript podrá seguir haciendo cosas. Si queremos que nos avise, podemos pasar un parámetro adicional que será una función. El this de esa función será el elemento que ha aparecido/desaparecido.
// Saca un alert cuando termina
$('p:first').fadeTo(1000,0.10,function(){alert ('ya')});
Podemos encadenar llamadas, cuyos efectos animados quedarán encolados y se iran ejecutando secuencialmente.
// Hace desaparecer los párrafos y luego que aparezcan.
$('p').fadeOut().fadeIn()
show(), hide() y toggle()[editar]
Estos métodos sin parámetros muestran u ocultan un componente, cambiando su propiedad CSS display. Al ocultarlo, recuerda el estado previo de display para poder restaurarlo cuando hagamos show().
Si pasamos un parámetro, este será el tiempo en milisegundos que el componente debe tardar en aparecer o desaparecer. Para ello el método cambiará progresivamente el alto, ancho y opacidad, de forma que pasado el tiempo el componente sea visible ocupando todo su tamaño u oculto sin ocupar espacio. Como en los métodos fade(), podemos poner el tiempo en milisegundos o los String 'slow' o 'fast',
// Oculta los párrafos inmediatamente
$('p').hide();
// Ahora los muestra despacito, en 1 segundos (1000 milisegundos)
$('p').show(1000);
Al igual que los métodos fade, la llamada retorna inmediatamente y podríamos pasar una función como segundo parámetro para que nos avise al terminar. También podemos encadenar efectos que se iran ejecutando secuencialmente, esperando el siguiente por el anterior.
Podemos pasar un segundo parámetro que será una función a la que se llame cuando termine la animación.
slideUp(), slideDown() y slideToogle()[editar]
Estos métodos hacen un efecto de "cortinilla", haciendo que la parte inferior del elemento vaya subiendo hasta ocupar un alto cero o que vaya cayendo hasta ocupar todo su espacio.
Sin parámetros el efecto durará 400 milisegundos. Podemos poner de parámetro el tiempo que queremos que dure la animación en milisegundos, o bien los string 'fast' o 'slow'.
// Hace que los párrafos se encojan hacia arriba en 400 ms
$('p').slideUp();
// Hace que vuelvan a desplegarse hacia abajo en 1 segundo
$('p').slideDown(1000);
Podemos concatenar llamadas, de forma que unas esperaran por otras. También podemos pasar una función como segundo parámetro para que nos avise una vez se ha terminado el efecto.
animate()[editar]
Este es un método general para conseguir casi cualquier animación que queramos. Podemos conseguir animación cambiando cualquier atributo CSS que sea numérico, como ancho, alto, tamaño de letra, bordes, margenes, etc. No podemos conseguir animaciones si el atributo es texto, por ejemplo, no podemos conseguir animaciones que cambien de color de fondo, de fuente de letra, etc.
Debemos pasar como primer parámetro un objeto de propiedades javascript cuyos valores sean los atributos css que queremos cambiar y los valores los valores finales para ese atributo en la animación. Por ejemplo
$('p:first').animate({'font-size':30})
Hará crecer los primeros párrafos del texto hasta tener un tamaño de fuente de letra 30, por defecto en 400 milisegundos. Al llevar el atributo CSS un guión (font-size), hemos tenido que entrecomillarlo para usarlo de clave del objeto de propiedades. De todas formas, jQuery acepta para este tipo de atributos con guió el formato fontSize, es decir, sin guión y con mayúscula la letra inmediatamente detrás del guión.
Podemos poner un segundo parámetro que sea la duración deseada en milisegundos, o las consabidas cadenas 'slow' o 'fast'. Admite un tercer parámetro "easing", al igual que todos los métodos anteriores, pero que veremos más adelante, su valor por defecto es 'swing'. El cuarto parámetro sería la función a la que se llamará cuando la animación termine.
Un ejemplo algo más complejo
// Ponemos un borde al primer párrafo
$('p:first').css({'border-style':'solid','border-color':'black'});
// Hace crecer la letra a tamaño 30 y pone el grosor del borde a 5 en un segundo
$('p:first').animate({'font-size':30, 'border-width':5},1000);
En vez de valores numéricos que se presuponen en pixels, podemos poner string con el valor numérico y cualquiera de las unidades que admita CSS, por ejemplo, para cambiar el tamaño de la fuente es válido
// Hace el tamaño de letra el doble
$('p:first').animate({'font-size':'2em'});
easing[editar]
animate() adminte un parámetro easing. Las demás funciones no tienen este parámetro, pero se le puede pasar como veremos en el siguiente apartado. Veamos qué es esto de easing.
Cuando se hace una animación que lleve un valor, por ejemplo, de 0 a 1 en 1 segundo, el cambio de valor se puede hacer de forma lineal, es decir, que en el segundo 0 correspone el valor 0, en el segundo 0.1 corresponde el valor 0.1, en el 0.2 el valor 0.2 y así sucesivamente hasta llegar al 1. El efecto visual hecho de esta forma no suele ser agradable a la vista, suele ser mejor ir de 0 a 1 de una forma no lineal.
jQuery por defecto hace el cambio siguiendo una función sinosoidal que llama 'swing'. Esta función hace que el cambio comience lentamente, se vaya acelerando llegando a su máxima velocidad cuando está en el valor medio (0.5 en el ejemplo anterior) y luego vuelve a frenar hasta llegar al final casi con velocidad cero. Por ejemplo, si vamos a ocultar un componente, empezará a desaparecer despacio, acelerando en su desaparición hasta estar casi totalmente oculto y luego terminará de ocultarse despacio nuevamente. Este efecto suele ser más agradable visualmente.
La función animate() admite como tercer parámetro la función easing que queramos usar. jQuery dispone de 2 funciones: 'swing' que es la de defecto y 'linear'. Estas funciones están almacenas en el objeto jQuery.easing
jQuery.easing;
linear: function (e){return e}
swing: function (e){return.5-Math.cos(e*Math.PI)/2}
Podemos ahí añadir nuestras propias funciones. Por ejemplo
jQuery.easing.raiz=Math.sqrt;
$('p:first').animate({'font-size':'2em'},1000,'raiz')
Lo único que se espera de esta función es que devuelva 0 si se le pasa 0, devuelva 1 si se le pasa 1 y devuelva otros valores, en principio intermedios, si se le pasan otros valores.
Pasando un único parámetro[editar]
Hemos ido llamando a estas funciones pasandoles los parámetros correspondientes. Sin embargo, todas ellas admiten que su primer parámetro sea un objeto javascript con diversas claves/valores. Estas claves/valores de alguna forma reemplazan a los parámetros pasados de forma normal. Por ejemplo, a fadeOut() podriamos llamarlo de cualquiera de las siguientes formas equivalentes
$('p:first').fadeOut('slow',function(){alert('ya')})
// O bien
$('p:first').fadeOut({duration:'slow',complete:function(){alert('ya')}})
es decir, un objeto con las claves duration y complete para el tiempo y la función respectivamente.
En el caso de animate(), los parámetros sería dos. El primero, igual que antes, es el conjunto de propiedades CSS y valores a alcanzar. Es segundo parámetro sería este que estamos comentando ahora.
La ventaja de hacerlo de esta forma es que ese objeto admite más claves para distintas cosas, por ejemplo, easing. fadeOut() y demás (salvo animate()), no admiten easing como un parámetro normal, pero si lo admiten aquí
$('p:first').fadeOut( {
duration:'slow',
complete:function(){alert('ya')}
easing:'linear'}
);
Otros valores que podemos poner son:
step[editar]
Aquí podemos pasar una función con dos parámetros a la que se nos ira llamando según vaya sucediendo la animación. El primer parámetro que nos pasarán es el valor actual de la propiedad que está cambiando, el segundo parámetro es un objeto jQuery.fx que tiene algunos atributos útiles, como el elemento que se está animando, el valor inicial de la animación, el final y la propiedad CSS que se está animando. Por ejemplo, si en un html
<div> <p>primer parrafo</p> </div>
ejecutamos
$('p:first').fadeIn( {
step : function(valor, fx){
$('div').append("<p>"+valor+"-"+fx.elem+"-"+fx.start+"-"+fx.end+"-"+fx.prop+"</p>")
}
});
en nuestra página veremos que se añade algo como esto
0-[object HTMLParagraphElement]-0-1-opacity 0.0044501263170125815-[object HTMLParagraphElement]-0-1-opacity 0.015708419435684406-[object HTMLParagraphElement]-0-1-opacity 0.030904332038757976-[object HTMLParagraphElement]-0-1-opacity 0.050986212119692176-[object HTMLParagraphElement]-0-1-opacity 0.07783603724899252-[object HTMLParagraphElement]-0-1-opacity
es decir, valores intermedios de la animación (0, 0.0044.., 0.0157...) de un objeto párrafo, que va variando entre 0 y 1 su opacidad.
En la propiedad global jQuery.fx.interval va un valor en milisegundos que dirá cada cuanto nos llaman a estos step. Por defecto vale 13 ms, lo que quiere decir que si una animación dura por ejemplo 130 ms, nos llamarán 10 veces.
queue[editar]
Es un booleano que por defecto vale true. Si vale true, el efecto se encolará esperando por que las animaciones anteriores en el mismo elemento terminen. Imagina que tenemos las anaciones A,B y C encoladas de la forma normal y ahora añadimos una animcación D con queue=false. Esta animación empezara inmediatamente, sin esperar por A,B o C. Si ahora añadiemos una quinta animación E con queue=true, esta animación se encolará detrás de C, es decir, da igual que D haya o no acabado, la nueva animación E se ejecutará cuando termine la C.
specialEasing[editar]
En el caso de animate(), si animamos varias propiedades CSS a la vez, todos ellos iran por defecto con el mismo easing. Usando esta propiedad podemos hacer que cada propiedad CSS siga un easing distinto. Por ejemplo, podemos poner
$('p:first').animate( {
'font-size':30,
'border-width':5}, {
duration : 'fast',
specialEasing : {
'font-size' : 'swing',
'border-width' : 'linear'
}
});
Parar/Deshabilitar las animaciones[editar]
Es posible que aunque tengamos animaciones, podamos no querer que se muestren en determinados casos (por ejemplo, puede haber usuarios que les moleste y quieran deshabilitarlas). La forma de eliminar las animaciones es poner jQuery.fx.off a true. Si este valor es true, ninguna animación se efectuará. Sí se hará el cambio (se ocultará el componente, se cambiará su opacidad, ...), pero no se verá en forma de animación, sino que se hará de golpe.
El método stop() ejecutado en un eliminará la animación actual. Podemos poner un parámetro true si queremos que también se eliminen las animaciones que vayan encoladas detrás. Si paramos la animación a medias, el valor que está cambiando se quedará a medias. Podemos pasar un segundo parámetro a true para indicar que queremos que los valores finales se alcancen del golpe. Por ejemplo
// Para la animación actual, dejando la propiedad CSS a medias y continua con la siguiente
// animación encolada
$('p').stop();
// Para la animación actual y todas las que van detrás, dejando la actual propiedad CSS a medias
$('p').stop(true);
// Para la animación actual y todas las que van detrás, pero lleva las propiedades CSS a sus valores finales
$('p').stop(true,true);
El método finish() es equivalente a stop(true,true)