Scribd Logo
Upload

Welcome to Scribd!

  • Retrasar Un Efecto

    Uploaded by

    Leri Blanco Marcos
    10 views2 pages
    dd

    Original Title

    6

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    dd

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views2 pages

    Retrasar Un Efecto

    Uploaded by

    Leri Blanco Marcos
    dd

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    Retrasar un efecto

    delay(duracin)
    Permite retrasar la ejecucin de un efecto.
    "duracin" es un nmero 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 capas en dos tiempos, con un retraso de 2 segundos para la segunda.

    Al hacer clic en el botn, solo se muestra la capa 1.

    La capa 2 aparece con un retraso de 2 segundos.


    El cdigo es el siguiente:

    <!doctype html>
    <html lang="es">
    <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
    div { width: 60px; height: 60px;
    float: left;
    border: 1px solid black;

    font-size: 52px;
    text-align: center;}
    .primero { background-color: white }
    .segundo { background-color: #9cf;
    margin-left: 10px;}
    </style>
    <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>
    </head>
    <body>
    <p><button type="button">Run</button></p>
    <div class="primero">1</div>
    <div class="segundo">2</div>
    </body>
    </html>
    Explicaciones.
    $(document).ready(function() {
    $("button").click(function() {
    Cuando se ha cargado el DOM, al hacer clic en el botn.
    $("div.primero").slideUp(300).fadeIn(600);
    La capa con la clase primero ($("div.primero")) se desplaza hacia arriba (slideUp(300)) y
    aparece progresivamente (fadeIn(600)).
    $("div.segundo").slideUp(300).delay(2000).fadeIn(600);
    La capa con la clase segundo ($("div.segundo")) se desplaza hacia arriba (slideUp(300)). Se
    produce una pausa de 2000 milisegundos (delay(2000)). Cuando termina esta pausa, aparece
    progresivamente (fadeIn(600)).
    });
    });
    Fin del script.

    You might also like