Otros efectos que se pueden conseguir conjQuery
Quieres ver ahora algo de movimiento? Sonries? ja ja ja. Ya verás qué divertido es esto. Mucho más que los estilos CSS, y mira que me dejaron alucinando cuando los conocí. Esto es una verdadera pasada. Vamos a ver por último como hacer un fade out al body, es decir, a todo lo que contiene el body que es... todo. Un fade out, para el que no lo sepa, es una transición de un estado a otro, que disminuye poco a poco en el tiempo. En nuestro caso con la palabra mágica fadeout haremos que el contenido desaparezca poco a poco. Basta, para que veas lo sencillo que es hacer estos cambios, con añadir esta nueva línea al script de, por ejemplo, el link del foro:
{
$(".cctw").click(function(evento)
{
$("body").css("background-color","ffff00");
alert("Te diriges a una gran página, CCTW!");
});
$(".forocctw").click(function(evento)
{
$('body').fadeOut(3000);
$(".forocctw").css({"background-color" : "red", "color" : "white" }) ;
alert("Te diriges al foro de CCTW!");
});
});
Si guardas el archivo funciones.js y recargas la index.html, verás que tras pulsar sobre el botón de aceptar de la ventanita, el texto de la página desaparece. Magia de nuevo! y con tan solo poner una línea más!
No voy a explicar ahora cómo se define ese fade out, oki? Creo que a estas alturas, con estos ejemplos, ya podemos pasar a definir cada uno de los estados para los que podemos definir acciones y, a ver todos esos tipos de acciones posibles uno por uno.
Algunos los verás tontos, pero te aseguro que después de conocerlos todos podrás plantearte hacerte un menú desplegable con cantidad de efectos, con pocas líneas de código y, válido para todos los navegadores, que no es poco. Por supuesto además de menús desplegables, existen otras muchas aplicaciones que tienen que ver con formularios y con cientos de cosas más. Poco a poco, eh? Si te fijas en las poquitas líneas que tienen la hoja de estilos, el archivo funciones.js e incluso el index.html te darás cuenta de cuánto podemos estropear una página..... ups perdón, de cuántas cosas podemos hacer en una web con muy muy poco trabajo.
Si te gustó, si encontraste algo que quieres que expliquemos mejor, o sencillamente para saludarnos, no dejes de visitar nuestro foro CCTW, en la sección "Curso de jQuery". Hasta ahora solo he querido mostraros un poquito de lo que podemos hacer con jQuery, para que veais cómo funciona, como se escribe y tal. En la siguiente sección vamos a ver todas las opciones que nos permite el jQuery uno por uno y con más detalle.
Hasta dentro de muy poco!!
Introdución al jQuery:
