Ocultar y mostrar un elemento de la página con jQuery

Ocultar y mostrar elementos con jQuery

Ocultar y mostrar elementos con jQuery

Si no tienes todavía enlazado jquery en tu proyecto puedes seguir nuestro tutorial Enlazar proyecto con jQuery

Métodos fadeOut() y fadeIn()

Podemos hacer desaparecer un elemento con jQuery utilizando el evento fadeOut() y hacerlo reaparecer de nuevo con fadeIn()

Veamos un ejemplo

<!--Elemento que vamos a ocultar y mostrar-->
<p class="parrafo">Ejemplo de fadeOut() y fadeIn()</p>
<!--Botones para hacerlo-->
<input id="ocultar" type="button" value="Ocultar"/>
<input id="mostrar" type="button" value="Mostrar"/>
<script>
//Creamos el evento click y ocultar para el primer botón
$("#ocultar").click(function(){
$(".parrafo").fadeOut();
});
//Evento click y ocultar para el segundo botón
$("#mostrar").click(function(){
$(".parrafo").fadeIn();
});
</script>

Estos eventos también permiten pasarle parámetros como la duración del efecto, con valores como «slow«, «fast«, o el tiempo en milisegundos que durará. También se le puede pasar otra función como segundo parámetro que se ejecutará al finalizar el evento.

Veamos un ejemplo

<!--Elemento que vamos a ocultar y mostrar-->
<a id="enlaceTuto" href="/https:/tutobasico.com">Tutobasico</a>
<!--Botones-->
<input id="ocultar" type="button" value="Ocultar"/>
<input id="mostrar" type="button" value="Mostrar"/>
<script>
//Creamos el evento click y ocultar para el primer botón
$("#ocultar").click(function(){
//Le pasamos el parámetro "slow" para que se oculte lentamente
$("#enlaceTuto").fadeOut("slow");
});
//Evento click y ocultar para el segundo botón
$("#mostrar").click(function(){
//Le pasamos 1000 para que dure 1000 milisegundos
//También la función mensaje() para que la ejecute después
$("#enlaceTuto").fadeIn(1000,mensaje());
}); //Función mensaje
function mensaje(){
alert("Hola Mundo"); }
</script>

Método fadeToggle()

Podemos combinar estos dos métodos con fadeToggle(). Al ejecutar fadeToggle() sobre un elemento, si está visible se ocultará y si está oculto se mostrará. También podemos pasarle el tiempo que tardará en hacerlo y una función callBack que se ejecutará cuando finalice.

Podemos usar también los métodos hide() y show(), que hacen exactamente lo mismo que los anteriores. También se le puede pasar por parámetro la duración.

¿Qué diferencia hay entre usar hide() o show() y usar fadeOut() y fadeIn()?

La diferencia es el valor de display que poseen los elementos antes de aplicarle los métodos. Si el elemento tiene un «display: inline» y lo ocultamos con la función fadeOut(), al volver a mostrarlo con fadeIn(), el display se pierde. En cambio si lo hacemos con hide(), esa propiedad se guarda en el caché de jQuery y cuando lo volvemos a mostrar con show() vuelve a adquirir el display: inline que tenía.

Método fadeTo()

Con el método fadeTo() nos permite modificar la opacidad de un elemento. El funcionamiento es similar a los anteriores, pero podemos además pasarle por parámetro la opacidad. Veamos un ejemplo

<!--Elemento que vamos a cambiar la opacidad-->
<p class="parrafo">Ejemplo de fadeTo()</p>
<!--Botones para hacerlo-->
<input id="ocultar" type="button" value="Más opacidad"/>
<script>
//Creamos el evento click y ocultar para el primer botón
$("#ocultar").click(function(){
$(".parrafo").fadeTo("slow",0.20);
});
</script>

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas