¿Cómo puedo retrasar una animación jQuery después de una carga de la página?

Aquí está mi ejemplo:
http://jsfiddle.net/UuD8s/5/

$("#transition")
    .delay(5000)
    .animate({ width: "400px" }, { duration: 1000, queue: true });

$("#transition")
    .delay(2000)
    .animate({ left: "100px" }, { duration: 1000, queue: true });​

Quiero retrasar mi segunda animación de inicio después de que la página se inicia con 2 segundos de retraso.
El problema es que se inicia después de la primera animación. Si queue se establece en false no hay ningún retraso.

¿Cómo puedo retrasar la animación 2 segundos después de que la página de lanzamiento?

InformationsquelleAutor SakerONE | 2012-05-17

3 Kommentare

  1. 7

    Con el fin de retrasar su animación después de la página de lanzamiento de establecer queue a false y el uso de un setTimeout de dos segundos:

    $("#transition")
        .delay(5000)
        .animate({width: "400px"}, {duration: 1000, queue: true});
    
    setTimeout(function() {
    
        $("#transition").delay(2000).animate({ left: "100px" }, {
            duration: 1000,
            queue: false
        });
    
    }, 2000);​

    Aquí un live demo.

  2. 1

    Puede utilizar el setTimeout() método para retrasar las funciones de javascript.

    $("#transition").delay(5000).animate({width: "400px"}, {duration: 1000, queue: true});
    setTimeout(function() { 
        $("#transition").delay(2000).animate({left: "100px"}, {duration: 1000, queue: false});  
    }, 2000);
  3. 0

    Como yo lo entiendo desea que el segundo de animación (el de la izquierda) para el inicio de 2 segundos después de su lanzamiento. Este será de 1 segundo. Desea que el primero en comenzar 5 segundos después de su lanzamiento.

    Entonces lo que puedes hacer es ponerlos en cola para que dos segundos después de que la izquierda se termina el ancho de uno de patadas en el…

    $("#transition").delay(2000).animate({left: "100px"}, {duration: 1000});
    $("#transition").delay(2000).animate({width: "400px"}, {duration: 1000});

    http://jsfiddle.net/UuD8s/7/

    Esto no resolver la situación en la que por encima de donde no se están ejecutando de forma simultánea pero si quieres que se ejecute simultaneouly (por ejemplo, la anchura debe comenzar a encoger a mitad de camino a través del movimiento), entonces esto no va a funcionar.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea