HOWTO · jQuery
Usa el método delay() en jQuery
Este tutorial demuestra cómo usar el método delay() para retrasar la ejecución de un elemento en particular en jQuery.
En esta página
El método delay() de jQuery establece un temporizador para ejecutar el siguiente elemento. Este tutorial demuestra cómo usar el método delay() en jQuery.
jQuery delay() Método
El delay() es una función integrada en jQuery que se utiliza para retrasar la ejecución de un elemento en particular. Este método es la mejor opción para proporcionar un retraso entre los efectos de jQuery en cola.
La sintaxis de este método es:
$(selector).delay(parameter1, parameter2);
Dónde:
- El
selectorpuede ser el id, la clase o el nombre del elemento. - El
parameter1es la velocidad del retardo, que puede ser en milisegundos, lento o rápido. - El
parameter2se utiliza opcionalmente para especificar el nombre de la cola; el valor predeterminado esfx, que es la cola de efectos estándar.
Probemos ejemplos para mostrar el efecto del método delay() en jQuery:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box1").delay("slow").fadeIn();
$("#box2").delay("fast").fadeIn();
$("#box3").delay(1000).fadeIn();
$("#box4").delay(2000).fadeIn();
$("#box5").delay(3000).fadeIn();
$("#box6").delay(4000).fadeIn();
});
});
</script>
</head>
<body>
<h1>jQuery delay() method.</h1>
<p>Click the button to show the delay effect. Color boxes will fade in on the click with a delay</p>
<button>Click Here</button>
<br><br>
<div id="box1" style="width : 50px; height : 50px; display : none; background-color : pink;"> slow </div> <br>
<div id="box2" style="width : 50px; height : 50px; display : none; background-color : green;"> fast </div> <br>
<div id="box3" style="width : 50px; height : 50px; display : none; background-color : blue;"> 1 second </div> <br>
<div id="box4" style="width : 50px; height : 50px; display : none; background-color : violet;"> 2 seconds </div> <br>
<div id="box5" style="width : 50px; height : 50px; display : none; background-color : yellow;"> 3 seconds </div> <br>
<div id="box6" style="width : 50px; height : 50px; display : none; background-color : purple;"> 4 seconds </div> <br>
</body>
</html>
En el código anterior, los cuadros de color se desvanecerán con el retraso dado. Ver salida:
Probemos con otro ejemplo en jQuery, que animará el div basado en el método delay(). Ver el ejemplo:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("#DemoButton").click(function() {
$("#DemoDiv").delay("fast").animate({
width: "250px",
padding: "35px"
});
$("#DemoDiv").delay("slow").animate({
width: "350px",
padding: "55px"
});
$("#DemoDiv").delay(1000).animate({
width: "275px",
padding: "50px"
});
$("#DemoDiv").delay(2000).animate({
width: "500px",
padding: "60px"
});
$("#DemoDiv").delay(3000).animate({
width: "200px",
padding: "40px"
});
});
});
</script>
<style>
#DemoDiv {
background-color : lightblue;
width : 200px;
height : 100px;
font-size : 30px;
padding : 10px;
display : block;
}
</style>
</head>
<body>
<div id="DemoDiv">Hello, This is Delftstack.com</div>
<button id="DemoButton">Click Here</button>
</body>
</html>
El código anterior cambiará la altura y el ancho del div en función del retraso de tiempo dado. Ver salida:
