El método delay() de jQuery sirve para generar un intervalo de espera entre la ejecución de funciones de la cola de efectos.
Es tan sencillo como invocarlo indicando como parámetro el número de milisegundos que deseas que se espere entre una y otra llamada a las funciones encoladas en la cola de efectos, pero aunque sea bastante obvio, quizás estará bien ofrecer algunas notas sobre su funcionamiento.
Como sabemos, las funciones de la cola de efectos se ejecutan una detrás de la otra, sin que transcurra ningún tiempo entre los distintos efectos encolados. Es decir, en el instante que un efecto termina, comienza el siguiente efecto de la cola sin más demora. Pero esto es algo que podemos cambiar si usamos delay().
.delay( duración, [ nombreCola ] )
El método delay recibe dos parámetros, que explicamos a continuación:- El parámetro duración sirve para indicar los milisegundos de espera que tienen que producirse entre efecto y efecto.
- El parámetro nombreCola está para indicar en qué cola de efectos se desea realizar ese retardo. Este segundo parámetro es opcional y si no lo indicamos se realizará la espera en la cola de efectos predeterminada.
Veamos el ejemplo siguiente:
capa = $("#micapa");
capa.slideUp(1000);
capa.delay(2000)
capa.slideDown(1000);
En este caso estamos encolando dos efectos, con un retardo entre medias de 2 segundos. En total habremos encolado tres funciones, la primera un efecto slideUp(), la segunda un retardo de 2000 milisegundos y la tercera un efecto slideDown().
Esta carga de las tres funciones se podría resumir, concatenando llamadas a los métodos de la siguiente manera:
capa.slideUp(1000).delay(2000).slideDown(1000);
Ejemplo completo con efectos y delay()
A continuación podemos ver una página de ejemplo completa en la que hacemos varios efectos y aplicamos varios retardos entre ellos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<title>Cola con delay()</title>
<script src="../jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
#micapa{
left: 20px;
top: 20px;
position: absolute;
font-size: 0.75em;
font-family: tahoma, verdana, sans-serif;
width: 740px;
background-color: #ddf;
padding: 10px;
border: 1px solid #bbb;
}
</style>
<script languague="javascript">
function colaEfectos(){
capa = $("#micapa");
capa.slideUp(1000);
capa.delay(2000)
capa.slideDown(1000);
capa.fadeTo(1500, 0.3).delay(3000).fadeTo(500, 1);
capa.delay(500);
capa.animate({
"font-size": "+=0.5em"
}, 1000, colaEfectos);
//alert (capa.queue().length)
}
$(document).ready(function(){
colaEfectos();
});
</script>
</head>
<body>
<div id="micapa">Vamos a ejecutar varios métodos para hacer una cola de efectos, pero vamos a ponerles un retardo entre unos y otros.</div>
</body>
</html>
Podemos ver el ejemplo en funcionamiento en una página aparte.
Ahora que ya hemos hecho múltiples ejemplos de trabajo con colas de efectos, siempre con la cola de efectos predeterminada, vamos a aprender en el próximo artículo cómo trabajar con otras colas de efectos distintas.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...