.click() de jQuery adjunta un evento de clic a elementos seleccionados o lo desencadena, manejando eventos de forma compatible con todos los navegadores.
Leer másMétodos.
Métodos.
El método .show() en jQuery se utiliza para mostrar elementos ocultos, restableciendo su visualización a su valor predeterminado o al valor especificado en los parámetros. Este método es útil para hacer que los elementos previamente ocultos sean visibles en la página de manera suave y gradual si se especifica una duración para la animación.
Definición:
El método .show() muestra los elementos seleccionados estableciendo su propiedad CSS display en su valor predeterminado (generalmente block para elementos de bloque y inline para elementos en línea). Si se especifica una duración, se puede crear una animación que aumente gradualmente la opacidad de los elementos hasta que se vuelvan completamente visibles.
Sintaxis:
index.js
JavaScript
$(selector).show(duration, easing, complete);selector: Un selector que define el conjunto de elementos a los que se aplicará el método.duration(opcional): El tiempo en milisegundos que debe durar la animación o una palabra clave ("slow"o"fast"). El valor predeterminado es 400 milisegundos.easing(opcional): El tipo de función de aceleración que se debe utilizar para la animación. Los valores comunes son"swing"(predeterminado) y"linear".complete(opcional): Una función de devolución de llamada que se ejecuta cuando la animación ha terminado.
Ejemplos completos en HTML.
Ejemplo 1: Mostrar un elemento con duración y easing predeterminado.
ejemplo.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de show() con Predeterminado.</title>
<style>
#cajaVerde {
width: 100px;
height: 100px;
background-color: green;
display: none; /* Oculta la caja inicialmente */
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonMostrarVerde").click(function() {
// Muestra la caja en 400 milisegundos con easing "swing"
$("#cajaVerde").show();
});
});
</script>
</head>
<body>
<button id="botonMostrarVerde">Mostrar Caja</button>
<div id="cajaVerde"></div>
</body>
</html>
ejemplo.js
JavaScript
// Muestra la caja en 400 milisegundos con easing "swing"
$("#cajaVerde").show();Explicación del Ejemplo:
Al hacer clic en el botón “Mostrar Caja”, la caja verde, que estaba oculta inicialmente, se mostrará en 400 milisegundos utilizando el efecto de easing predeterminado “swing”.
Resultado.
Ejemplo 2: Mostrar un elemento con duración personalizada y función complete.
ejemplo.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de show() con Duración y Complete.</title>
<style>
#cajaAmarilla {
width: 100px;
height: 100px;
background-color: yellow;
display: none; /* Oculta la caja inicialmente */
}
#mensajeMostrar {
display: none;
margin-top: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonMostrarAmarilla").click(function() {
$("#cajaAmarilla").show(2000, "linear", function() {
// Muestra un mensaje después de que la caja se muestre
$("#mensajeMostrar").show().text("¡Caja mostrada!");
});
});
});
</script>
</head>
<body>
<button id="botonMostrarAmarilla">Mostrar Caja con Mensaje</button>
<div id="cajaAmarilla"></div>
<div id="mensajeMostrar"></div>
</body>
</html>
ejemplo.js
JavaScript
$("#cajaAmarilla").show(2000, "linear", function() {
// Muestra un mensaje después de que la caja se muestre
$("#mensajeMostrar").show().text("¡Caja mostrada!");
});Explicación del Ejemplo:
Al hacer clic en el botón “Mostrar Caja con Mensaje”, la caja amarilla, que estaba oculta inicialmente, se mostrará en 2 segundos utilizando el efecto de easing “linear”. Después de que la caja se haya mostrado completamente, se mostrará un mensaje que indica que la caja ha sido mostrada.
