Repaso a las funciones de jQuery show() y hide(), se usan para mostrar y ocultar elementos del DOM de la web, mayoritariamente suelen ser divs, ids, clases, imágenes, elementos de formularios, etiquetas…
El uso combinado de estas 2 funciones de jQuery emula la funcionalidad básica de jQuery toggle() que muestra y oculta elementos. Otros funciones de efectos básicos son:
Siguendo la documentación oficial de show() y hide() vamos a repasar sus sintaxis:
$(selector).hide(duracion,callback); $(selector).hide(duracion [,easing] [,callback]); $(selector).show(duracion,callback); $(selector).show(duracion [,easing] [,callback]);
Os detallo los diferentes parámetros de la sintaxis:
Veamos las difeentes parámetros que podemos usar:
$(selector).show(opciones); $(selector).hide(opciones);
Es importante tener en cuenta que estas 2 funciones actuan sobre un único elemento (El primero en el DOM de la web).
Por ejemplo, si tenemos 2 imágenes con el mismo id, actuarán sobre la imagen que esté primero en el código fuente.
En este primer ejemplo de jQuery show() y hide() vamos a ver cómo se ocultan y muestran elementos de la web.
$(document).ready(function(){ $("#mostrar").on( "click", function() { $('#target').show(); //muestro mediante id $('.target').show(); //muestro mediante clase }); $("#ocultar").on( "click", function() { $('#target').hide(); //oculto mediante id $('.target').hide(); //muestro mediante clase }); });
Os explico el ejemplo:
El código HTML de los botones e imágenes es el siguiente:
<input id="target" type="button" value="ESTE BOTÓN APARECE Y DESAPARECE"> <img width="250" src="/wp-content/uploads/2012/12/jquery.jpg" class="target"> <input type="button" id="mostrar" name="boton1" value="Click para mostrar elementos"> <input type="button" id="ocultar" name="boton2" value="Click pora ocultar elementos">
En este segundo ejemplo vamos a ver cómo ocultar y mostrar elementos con una duración varios segundos.
$(document).ready(function(){ $("#mostrar").click(function(){ $('#target').show(3000); $('.target').show("slow"); }); $("#ocultar").click(function(){ $('#target').hide(3000); $('.target').hide("fast"); }); });
El código de este ejemplo es similar al anterior, con la diferencia de los parámetros que pasamos a las funciones.
El parámetro ‘slow‘ indica una animación lenta, bien sea ocultando o mostrando los elementos. Mientras que el parámetro ‘fast‘ indica una animación rápida. También hemos pasado el parámetro ‘3000’, que es la duración en milisegundos.
Los clicks los he controlado con la función jQuery click(). El código de los botones e imágenes es el mismo.
Vamos a añadir un callback que se ejecutará una vez finalizada la animación. Para verlo en funcionamiento tenemos este tercer ejemplo.
$(document).ready(function(){ $("#mostrar").click(function(){ $('.target').show(3000,function() { alert ('imagen mostrada!'); }); }); $("#ocultar").click(function(){ $('.target').hide(3000,function() { alert ('imagen ocultada!'); }); }); });
Este ejemplo es similar a los anteriores, se ha añadido el callback después de que la imagen aparezca y desaparezca mostrando un mensaje por pantalla.
El código HTML de la imagen y botón es el siguiente:
<img width="250" src="/wp-content/uploads/2012/12/jquery.jpg" class="target"> <input type="button" id="mostrar" name="boton1" value="Click para mostrar elementos"> <input type="button" id="ocultar" name="boton2" value="Click pora ocultar elementos">
En este cuarto ejemplo vamos a probar los parámetros swing y linear:
$(document).ready(function(){ $("#mostrar").click(function(){ $('.target').show("swing"); }); $("#ocultar").click(function(){ $('.target').hide("linear"); }); });
En el ejemplo no se aprecian los cambio de ritmo de la animación en el parámetro ‘swing’, recomiendo usar siempre fast, slow o milisegundos.
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: