Jorge Vallejo Blog

Blog del creativo, ilustrador y profesor de videojuegos Jorge Vallejo

Primeros pasos con jquery Efectos Transparencia


¿Qué es jquery?
jQuery es una libreria de JavaScript, pensada para interactuar con los elementos de una web por medio del DOM.(Document Object Model).
¿Por que usuarla?
Por que es bastante sencilla de utilizar, por aglutina en un unico archivo un monton de funcionalidades y por que enrique bastante tus webs.

Un ejemplo practico de esta libreria

Imaginemos como es mi caso, que queremos darle una apariencia de dinamismo a la pagina pero sin usar flash, por ejemplo vamos a hacer algo sencillo, que aparecan poco a poco los elementos de un menu.
1º Paso) Descargar la libreria jquery
2º Paso) en el head hacer la llamada a la libreria

<script src="js/jquery.js" type="text/javascript"></script>

3º Paso) Ponemos etiquetas id a nuestro menu,


<li id="li1">Enlace1</li>
<li id="li2">Enlace2</li>
<li id="li3">Enlace3</li>
<li id="li4">Enlace4</li>
<li id="li5">Enlace5</li>
<li id="li6">Enlace6</li>

4º Paso) En el head

<script type="text/javascript">
$(document).ready(function (){
$("li").hide();
$("#li1").fadeIn(300);
$("#li2").fadeIn(600);
$("#li3").fadeIn(900);
$("#li4").fadeIn(1200);
$("#li5").fadeIn(1500);
$("#li6").fadeIn(1900);
});
</script>

¿Que hemos hecho?
Primero hemos utilizado la funcion ready, que se pone en marcha mientras se carga la pagina, despues con $(“li”).hide() ocultamos todos los elementos li ,ya que para recoger el elemento que queremos usar, podemos hacer lo simplemente con $(“nombredeelemento”) o $(“nombredelId”), asi pues, una vez que hemos ocultado todos, los hacemos aparecer con la funcion fadeIn, dando distintos tiempos de menor a mayor para que aparezcan secuenciadamente.

1 comment for “Primeros pasos con jquery Efectos Transparencia

  1. jose manuel vazquez castro
    August 5, 2007 at 4:13 pm

    suena interesante men lo probare a ver ke pex ; ay ke empezar de a pooko en pookoo
    sigue blogeando..!!
    :)

Leave a Reply

Your email address will not be published. Required fields are marked *