keyframes - ejecutar javascript despues de cargar pagina

Termina una animación y luego comienza la otra

Question

Tengo dos divs y dos enlaces separados que desencadenan slideDown y slideUp para los divs.

Cuando uno de los divs se desliza hacia abajo y hago clic en el otro, oculto el primer div (slidingUp) y luego abro el otro div (slidingDown) pero, por el momento es como mientras un div se desliza hacia abajo, el otro, también al mismo tiempo, se desliza hacia arriba.

¿Hay alguna manera de decirle a jQuery que espere para terminar deslizándose hacia abajo de un div y solo luego empezar a deslizar hacia el otro?

Answer 1

La mayoría de las funciones de jquery tienen un parámetro de devolución de llamada, puede simplemente pasar una función a eso.

Answer 2

Puede usar una devolución de llamada para disparar un próximo efecto cuando el primero está listo:

$("#element1").slideUp(
    "slow", 
    function(){
        $("#element2").slideDown("slow");
    }
);

En este ejemplo, la función definida como segundo argumento del método slideUp se llama después de que la animación de slideUp ha finalizado.

Ver la documentación: http://docs.jquery.com/Effects/slideUp

Answer 3

Use el segundo parámetro de la función: devolución de llamada. Por ejemplo,

$(this).slideDown( speed, function(){ $(this).slideUp(); });

Answer 4

un ejemplo de esto se puede ver en JQuery para principiantes - Día 2

Hay 15 días de estos tutoriales y son un buen recurso. ¡Disfrutar!

Answer 5

$("#thisDiv").slideUp("slow", function() {
    // This function is called when the slideUp is done animating
    $(this).doNextThing();
});

Answer 6

Deberías encadenarlo así

function animationStep1()
{
   $(''#yourDiv1'').slideUp(''normal'', animationStep2);
}

function animationStep2()
{
   $(''#yourDiv2'').slideDown(''normal'', animationStep3);
}

// etc

Por supuesto, puede darle vida a esto con funciones recursivas, matrices con colas de animación, etc., según sus necesidades.

Answer 7

$(''#Div1'').slideDown(''fast'', function(){
    $(''#Div2'').slideUp(''fast'');
});

Editar: ¿Has comprobado el complemento de acordeón (si eso es lo que intentas hacer)?

Answer 8

Un ejemplo un poco más limpio y con un retraso entre la animación:

$("#elem").fadeIn(1000).delay(2000).fadeOut(1000);