.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 .slideUp() en jQuery se utiliza para ocultar un elemento con una animación deslizante hacia arriba. A diferencia del método .hide(), que simplemente oculta el elemento, .slideUp() realiza una animación que colapsa el elemento desde su altura completa hasta desaparecer.
Definición del método .slideUp():
El método .slideUp() oculta los elementos seleccionados mediante una animación que reduce su altura desde su valor completo hasta cero. Este método es útil para crear efectos visuales suaves y atractivos cuando se quiere ocultar contenido visible en la página.
Sintaxis:
index.js
JavaScript
$(selector).slideUp(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: Ocultar un elemento con duración y easing predeterminado.
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de slideUp() con Predeterminado.</title>
<style>
#cajaVerde {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonOcultarVerde").click(function() {
// Oculta la caja en 400 milisegundos con easing "swing"
$("#cajaVerde").slideUp();
});
});
</script>
</head>
<body>
<button id="botonOcultarVerde">Ocultar Caja</button>
<div id="cajaVerde"></div>
</body>
</html>
index.js
JavaScript
// Oculta la caja en 400 milisegundos con easing "swing"
$("#cajaVerde").slideUp();Explicación del Ejemplo 1:
Al hacer clic en el botón “Ocultar Caja”, la caja verde se ocultará en 400 milisegundos utilizando el efecto de easing predeterminado
"swing".Resultado:
Ejemplo 2: Ocultar 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 slideUp() con Duración y Complete.</title>
<style>
#cajaAmarilla {
width: 100px;
height: 100px;
background-color: yellow;
}
#mensajeOcultar {
display: none;
margin-top: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
$("#botonOcultarAmarilla").click(function() {
$("#cajaAmarilla").slideUp(2000, "linear", function() {
// Muestra un mensaje después de que la caja se oculte
$("#mensajeOcultar").show().text("¡Caja oculta!");
});
});
});
</script>
</head>
<body>
<button id="botonOcultarAmarilla">Ocultar Caja con Mensaje</button>
<div id="cajaAmarilla"></div>
<div id="mensajeOcultar"></div>
</body>
</html>
index.js
JavaScript
$("#cajaAmarilla").slideUp(2000, "linear", function() {
// Muestra un mensaje después de que la caja se oculte
$("#mensajeOcultar").show().text("¡Caja oculta!");
});Explicación del Ejemplo 2:
Al hacer clic en el botón “Ocultar Caja con Mensaje”, la caja amarilla se ocultará en 2 segundos utilizando el efecto de easing
"linear". Después de que la caja se haya ocultado completamente, se mostrará un mensaje que indica que la caja ha sido ocultada.Resultado:
jQuery.com
Contenido Relacionado.
Suscribirse
0 Comentarios
Más antiguo