miércoles, julio 25, 2007

Google
 

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.

Etiquetas: , , ,

1 Comentarios:

At 4:13 PM, Blogger d_vinchi666 said...

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

 

Publicar un comentario en la entrada

Enlaces de este post:

Crear un enlace

<< Home