Efectos de jQuery: Mostrar y ocultar elementos con jQuery

jQuery

Efectos de jQuery

Seguramente te hayas encontrado en la situación de tener que mostrar u ocultar elementos. Esto se puede hacer con JavaScript pero, jQuery proporciona un conjunto de funciones que permiten mostrar y ocultar elementos. En este post voy a mostrar funciones básicas para mostrar y ocultar elementos con jQuery.

Para usar esos efectos, se aplican a la selección jQuery, cómo cualquier función. Por ejemplo, si quiero ocultar los elementos con la clase ocultar, lo haría de la siguiente forma

JavaScript
1
$('.ocultar').hide();

Además, cada función de efecto puede tener como parámetros opcionales la velocidad y una función callback. La velocidad es el tiempo que tarda en completarse el efecto mientras que la función callback es la función que se ejecuta cuando el efecto ha terminado.

Para asignar la velocidad, puede emplearse un string («fast», «normal» o «slow») o los milisegundos que toma el efecto. En cuanto a los string, para ser más concretos serían 200, 400 y 600 milisegundos respectivamente.

Cuando se aplica un efecto que hace desaparecer un elemento, como en ejemplo que acabo de mostrar, este no se elimina del navegador. El elemento sigue estando en el DOM pero con la propiedad display en none. Al emplear display y no visibility, el elemento oculto no ocupa espacio dando la sensación de que no existe. Si esta propiedad te provoca dudas te recomiendo este post.

Función show()

Esta función hace que un elemento oculto pase a ser visible, bastante lógico no? Obviamente si lo aplicas a un elemento visible no tendrá efecto. En caso de no pasarle una velocidad, el elemento aparece inmediatamente. Sin embargo, si le pasas una velocidad, el elemento va apareciendo desde la esquina superior izquierda hasta la inferior derecha.

Por ejemplo, un div con el «id» prueba con las siguientes regla en CSS

CSS
1
2
3
4
5
6
7
8
<style>
#prueba{
   width:100px;
   height:100px;
   background-color:#F00;
   display:none
}
</style>

El div estará oculto por defecto y para mostrarlo, hay que darle al botón «mostrar».  Para ello le asignamos a «mostrar» la función del evento click y dentro de este la función show().

XHTML
1
2
3
4
5
6
7
8
9
<button id="mostrar">Mostrar</button>
<br />
<div id="prueba"></div>
 
<script>
$('#mostrar').click(function(){
$('#prueba').show(1000);
});
</script>

mostrar y ocultar elementos jquery - Ejemplo con show()

Función hide

Sucede lo mismo que con show() pero al revés.  Sin embargo, si le asignamos una velocidad, el elemento se irá encogiendo hasta desaparecer. Esta vez quitamos la propiedad display y cambiamos tanto el botón como la acción dentro de la función click()

XHTML
1
2
3
4
5
6
7
8
9
10
<button id="ocultar">Ocultar</button>
<br />
 
<div id="prueba"></div>
 
<script>
$('#ocultar').click(function(){
     $('#prueba').hide(1000);
});
</script>

mostra y ocultar elementos jquery - Ejemplo con shide)

Función toggle

Esta función alterna el valor display del elemento. Si un elemento está visible, toggle() lo culta y si está oculto lo muestra. Es una función ideal cuando quieres un control o botón que te sirva para mostrar y ocultar un elemento.

JavaScript
1
2
3
4
5
6
7
8
9
10
<button id="alternar">Alternar</button>
<br />
 
<div id="prueba"></div>
 
<script>
$('#alternar').click(function(){
$('#prueba').toggle();
});
</script>

mostrar y ocultar elementos jquery - Ejemplo con toogle()

 

Y hasta aquí las funciones básicas para mostrar y ocultar elementos con jQuery, espero que os haya gustado. A seguir picando 🙂