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
is_rest_api0
page01
numpages01
is_archive1
is_search1
is_home1
is_4041
is_attachment1
is_singular11
is_front_page1
is_feed1




Find solutions in the manual

One thought on “Primeros pasos con jquery Efectos Transparencia

  1. 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 *