Aug
13
Comments

Trabajando con jQuery - Esconder y Aparecer elementos

El día de hoy me puse a trabajar un poco con jQuery, el cual a estas es más que necesario entenderlo, comprender, y manejarlo a la perfección. En mi caso ando un poco atrasado pero pues hechando a perder se aprende.

Lo primero que debemos tener para poder trabajar un elemento con jQuery es obviamente el source, el cual podemos obtener desde aquí e incrustarlo de la siguiente manera en nuestro HEAD.


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Lo siguiente para aplicar elemento con jQuery sería aplicar el efecto deseado a nuestro divisor y posteriormente a nuestro parrafo o elemento que queremos aplicar los efectos seteados.

Un ejemplo podría ser, crear un reproductor flash el cual se pueda ocultar (stop) y reproducir (play), el cual quedaría de la siguiente manera:


<a href="#1" class="escondelo"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/stop.png"/></a>
<a href="#1" class="muestramelo"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/play.png"/></a>
<div class="difm">
<p class="laradio"><?php include (TEMPLATEPATH . "/radio.php"); ?></p>
</div>
<script>
$("a.muestramelo").click(function(){ $("div.difm").find("p.laradio:hidden").fadeIn("slow"); });
$("a.escondelo").click(function(){ $("div.difm").find("p.laradio:visible").fadeOut("slow"); });
</script>

Como podemos observar en el documento estaremos ocultando y apareciendo el archivo : radio.php el cual contiene un simple rerpductor flash para shoutcast.

En los efectos en el ejemplo utilizamos las opciones : fadeIn y fadeOut, que hay muchos efectos para poder incluirlos en el listado, así como el evento (click) el cual al dar click observaremos el efecto, para ello contamos también con varios eventos para incluirlos.

Solo es cosa de practicarlos un poco.

referencia | documentación jQuery
descargar | jQuery
Votar

Autor del Articulo | Power

Nombre del Articulo | Trabajando con jQuery - Esconder y Aparecer elementos

Categorias del articulo | diseño, recursos, tutoriales

Etiquetas Usadas en el articulo | | | |
Enlace para TrackBacks | trackback

Articulo Anterior | 5 cosas buenas que podemos extraer del spam

Articulo Siguiente | World War - 3D Animation por Digital Animation Herts Uni UK

Quieres un avatar?

Los avatares de este Blog y de muchos otros, son gracias al sistema de Gravatar, para que aparezca tu imagen, registrate en gravatar.com