Usa el método delay() en jQuery

Sheeraz Gul 15 febrero 2024

jQuery jQuery Delay

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 selector puede ser el id, la clase o el nombre del elemento.
El parameter1 es la velocidad del retardo, que puede ser en milisegundos, lento o rápido.
El parameter2 se utiliza opcionalmente para especificar el nombre de la cola; el valor predeterminado es fx, 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:

Retraso de jQuery

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:

Animación de retraso de jQuery

Autor: Sheeraz Gul

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

jQuery delay() Método

jQuery `delay()` Método