jQuery Effects – Show and Hide

En esta guía, aprenderás a mostrar y ocultar los efectos en jQuery

. Puedes mostrar y ocultar elementos html usando los métodos show() y hide() respectivamente.

jQuery hide()

El método jQuery hide() oculta el elemento html seleccionado. En el siguiente ejemplo, estamos ocultando el elemento h2 seleccionado.

Estamos llamando a $(this).hide(); dentro de este $(«h2»).click(function(), el método $(«h2»).click(function() se ejecuta cuando hacemos clic en un elemento h2 porque hemos pasado h2 en el selector de jQuery $(«h2»). El método $(this).hide(); se ejecuta dentro del método click y oculta el elemento sobre el que se ha hecho clic.

Como este código sólo se ejecutará cuando se haga clic en un elemento h2, por eso en el siguiente ejemplo cuando se hace clic en un encabezado h2, se oculta pero no pasa nada cuando se hace clic en otros elementos como párrafos y botones.

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script>$(document).ready(function(){ $("h2").click(function(){ $(this).hide(); });});</script></head><body><h2>jQuery hide() example</h2><p>Este tutorial está publicado en BeginnersBook.com</p><h2>Este es otro encabezado h2</h2><botón>botón</botón></cuerpo></html>

Salida:
Cuando la página se carga originalmente, todavía no hemos hecho clic en nada:
Método jQuery hide()

Después de que se haga clic en el primer elemento h2:
jQuery hide() ejemplo

Después de que se haga clic en el segundo elemento h2:
jQuery hide() output

jQuery mostrar y ocultar ejemplo

En el siguiente ejemplo, hemos asignado los ids «ocultar» y «mostrar» a los dos botones ocultar y mostrar respectivamente y estamos llamando a la función de clic en estos ids, estamos usando el selector de id de jQuery aquí.

En el botón de click evento sobre ocultar estamos ocultando el párrafo usando $(«p»).hide();, aquí hemos usado el selector de nombre de elemento para seleccionar todos los párrafos.

En el botón de clic en el evento de mostrar estamos mostrando el párrafo escondido usando el método show() así: $(«p»).show();.

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script>$(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });});</script></head><body><h2>jQuery show and hide example</h2><p>Este tutorial está publicado en BeginnersBook.com</p><button id="hide">hide</button><button id="show">show</button></body></html>

Salida:
Cuando no se hace clic en nada y la página sólo se carga:
jQuery show
Después de hacer clic en el botón de ocultar:
jQuery show method
Después de hacer clic en el botón de mostrar:
jQuery mostrar ejemplo

jQuery hide and show effect with speed parameter

En el ejemplo anterior hemos llamado al método hide() y show() sin parámetros. Sin embargo, podemos pasar el parámetro en estos métodos. Por ejemplo, podemos pasar los valores de velocidad en estos métodos que pueden ser en milisegundos.

Por ejemplo: Aquí estamos pasando el tiempo para mostrar y ocultar elementos en milisegundos, en el siguiente ejemplo, los elementos tardan 2000 milisegundos en estar completamente ocultos y tardan 3000 milisegundos en ser mostrados. Alternativamente podemos pasar los valores de velocidad como «lento» o «rápido».

$(document).ready(function(){ $("#hide").click(function(){ $("p").hide(2000); }); $("#show").click(function(){ $("p").show(3000); });});

❮ AnteriorSiguiente ❯

Rate this post

Deja un comentario

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

Scroll al inicio