En este artículo, veremos cómo usar el método delay() y por qué usarlo en jQuery. El método delay() se usa para configurar un temporizador para retrasar la ejecución del siguiente elemento en la cola.
Sintaxis:
$(selector).delay(para1, para2);
En el siguiente ejemplo, primero creamos un div de tamaño 250px X 200px y establecemos su propiedad de visualización en none. Además, creó un botón que llamará al método delay(). Cuando el usuario hace clic en el botón, se llama al método delay() y al método fadeIn(). El método de retraso() toma un valor de 2000 ms, lo que significa que el div se mostrará después de 2000 ms.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- Including jQuery -->
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style>
div {
width: 250px;
height: 200px;
display: none;
background-color: green;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
What is the use of delay()
method in jQuery?
</h3>
<div></div>
<br>
<button id="delay">delay() method</button>
</center>
<script>
$(document).ready(function() {
$('#delay').click(function() {
$('div').delay(2000).fadeIn();
});
});
</script>
</body>
</html>
Producción:
