Índice

Retrasar un efecto

delay(duración)

Permite retrasar la ejecución de un efecto.

  • duración es un número entero que expresa, en milisegundos, el retardo que se debe considerar a la hora de ejecutar el siguiente efecto.

Ejemplo:

Vamos a hacer que aparezcan las cajas en dos tiempos, con un retraso de 2 segundos para la segunda, con respecto a la aparición de la primera.

Estado inicial, se muestran las dos cajas:

images/6_6_v41.png

Al hacer clic en el botón, en primer lugar se ocultan las dos cajas:

images/6_6_v42.png

Después solo se muestra la caja 1:

images/6_6_v43.png

Después la caja 2 aparece con un retraso de 2 segundos:

images/6_6_v44.png

El código es el siguiente:

<!doctype html> 
<html lang="es"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery</title> 
<script src="jquery.js"></script> 
<script> 
    $(document).ready(function() { 
        $("button").click(function() { 
            $("div.primero").slideUp(300).fadeIn(600); 
            $("div.segundo").slideUp(300).delay(2000).fadeIn(600); 
        }); 
    }); 
</script> 
<style> 
    div { 
        width: 60px; 
        height: 60px; 
        float: left; 
        border: 1px solid black; 
      ...