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>

Más tutoriales de jQuery

Si te ha gustado no olvides compartir en redes sociales.

[addthis tool=»addthis_inline_share_toolbox_6jt6″]

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