Hola,
Lo primero que debes hacer es descargarte la librería:
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.1.min.js
Lo segundo, es incluirla en tu código HTML, exactamente entre las etiquetas <head></head>
Código HTML:
<script type="text/javascript" language="javascript" src="ruta del jquery"></script>
Una vez lo hayas hecho, creas una capa en el código con una id, supongamos que es
capa1 (da igual su posición en el código ya que usaremos CSS para posicionarla, y z-index para situarla por encima de todos los demás elementos del sitio web).
Después de haber hecho esto, pasamos de nuevo a la parte del código. Pongamos que el usuario debe pulsar Iniciar sesión para que se muestre esa capa que tenemos oculta.
Código HTML:
<a href="#" id="mostrar">Iniciar sesion</a>
Siguiente paso (el más
complicado, a poner debajo del todo, siempre dentro de las etiquetas <html></html>).
Código HTML:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
// Oculto la capa nombrada capa1
$("#capa1").hide();
$("#mostrar").click(function (){ // si el usuario pulsa en Iniciar sesión..
$("#capa1").fadeIn("slow"); // se muestra lentamente la capa oculta
});
}); // Fin del domready
</script>
Parece un poco lioso... pero intenta no frustrarte, es más sencillo de lo que crees ;)