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.

Ad debug output

The ad is displayed on the page

current post: Primeros pasos con jquery Efectos Transparencia, ID: 97

Ad: Anuncio2 (2573)
Placement: After Content 2 (after-content_2)

Display Conditions
general conditions
Adwp_the_query
term_id0
taxonomy0
is_main_query11
page01
numpages01
is_archive1
is_search1
is_home1
is_4041
is_attachment1
is_singular11
is_front_page1
is_feed1




Find solutions in the manual

1 comment for “Primeros pasos con jquery Efectos Transparencia

Leave a Reply

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