.animate() de jQuery crea animaciones personalizadas cambiando gradualmente los valores CSS de elementos seleccionados, añadiendo interactividad y dinamismo a las páginas web.
Leer másMétodos.
Métodos.
El método .delay() de jQuery se utiliza para retrasar la ejecución de las animaciones en una cola de animaciones. Este método es útil para crear efectos de animación secuenciales al agregar un retraso entre las animaciones en un conjunto.
Definición:
El método .delay() introduce un retraso antes de que se ejecute la siguiente animación en la cola del elemento.
Sintaxis:
index.js
JavaScript
$(selector).delay(ms);ms: El número de milisegundos a esperar antes de ejecutar la siguiente animación en la cola.
Ejemplo:
index.html
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de .delay() en jQuery</title>
<style>
#cuadro {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#iniciarAnimacionBtn").click(function(){
$("#cuadro")
.animate({ left: "250px" }, 1000)
.delay(500) // Retraso de 500 milisegundos
.animate({ top: "150px" }, 1000);
});
});
</script>
</head>
<body>
<h1>Ejemplo de .delay()</h1>
<div id="cuadro"></div>
<button id="iniciarAnimacionBtn">Iniciar Animación</button>
</body>
</html>
index.js
JavaScript
$("#cuadro")
.animate({ left: "250px" }, 1000)
.delay(500) // Retraso de 500 milisegundos
.animate({ top: "150px" }, 1000);Explicación del Ejemplo:
- Al hacer clic en “Iniciar Animación”, el cuadro azul se mueve hacia la derecha 250px en 1 segundo.
- Luego, se introduce un retraso de 500 milisegundos antes de que el cuadro se mueva hacia abajo 150px en 1 segundo.
Resultado.
jQuery.com
Contenido Relacionado.
Suscribirse
0 Comentarios
Más antiguo