.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 .slideDown() en jQuery se utiliza para mostrar un elemento oculto con una animación deslizante hacia abajo. A diferencia del método .show(), que simplemente hace que el elemento sea visible, .slideDown() realiza una animación que despliega el elemento desde un estado colapsado a su altura completa.
Definición:
El método .slideDown() muestra los elementos seleccionados mediante una animación que aumenta su altura desde cero hasta su altura completa. Este método es útil para crear efectos visuales suaves y atractivos cuando se revela contenido oculto en la página.
Sintaxis:
index.js
JavaScript
$(selector).slideDown(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: Desplegar un elemento con duración y easing predeterminado.
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de slideDown() con Predeterminado.</title>
<style>
#cajaAzul {
width: 100px;
height: 100px;
background-color: blue;
display: none; /* Oculta la caja inicialmente */
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonDesplegarAzul").click(function() {
// Despliega la caja en 400 milisegundos con easing "swing"
$("#cajaAzul").slideDown();
});
});
</script>
</head>
<body>
<button id="botonDesplegarAzul">Desplegar Caja</button>
<div id="cajaAzul"></div>
</body>
</html>
index.js
JavaScript
// Despliega la caja en 400 milisegundos con easing "swing"
$("#cajaAzul").slideDown();Explicación del Ejemplo 1:
Al hacer clic en el botón “Desplegar Caja”, la caja azul, que estaba oculta inicialmente, se desplegará en 400 milisegundos utilizando el efecto de easing predeterminado
"swing".Resultado.
Ejemplo 2: Desplegar un elemento con duración personalizada y función complete.
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de slideDown() con Duración y Complete.</title>
<style>
#cajaRoja {
width: 100px;
height: 100px;
background-color: red;
display: none; /* Oculta la caja inicialmente */
}
#mensajeDesplegar {
display: none;
margin-top: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonDesplegarRojo").click(function() {
$("#cajaRoja").slideDown(2000, "linear", function() {
// Muestra un mensaje después de que la caja se despliegue
$("#mensajeDesplegar").show().text("¡Caja desplegada!");
});
});
});
</script>
</head>
<body>
<button id="botonDesplegarRojo">Desplegar Caja con Mensaje</button>
<div id="cajaRoja"></div>
<div id="mensajeDesplegar"></div>
</body>
</html>
index.js
JavaScript
$("#cajaRoja").slideDown(2000, "linear", function() {
// Muestra un mensaje después de que la caja se despliegue
$("#mensajeDesplegar").show().text("¡Caja desplegada!");
});Explicación del Ejemplo 2:
Al hacer clic en el botón “Desplegar Caja con Mensaje”, la caja roja, que estaba oculta inicialmente, se desplegará en 2 segundos utilizando el efecto de easing
"linear". Después de que la caja se haya desplegado completamente, se mostrará un mensaje que indica que la caja ha sido desplegada.Resultado.
jQuery.com
Contenido Relacionado.
Suscribirse
0 Comentarios
Más antiguo