Finalice una animación y luego inicie la otra

Question

Tengo dos divisiones 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 (deslizamiento hacia arriba) y luego abro el otro div (deslizamiento hacia abajo) pero, por el momento es como mientras un div se desliza hacia abajo, el otro, también en el 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

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

Editar: ¿Ha revisado el plugin de acordeón (si eso es lo que estamos tratando de hacer)?

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 5

Se puede utilizar una devolución de llamada para disparar un efecto siguiente cuando el primero se hace:

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

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

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

Answer 6

Usted debe encadenar como este

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

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

// etc 

Por supuesto se puede condimentar esto con las funciones recursivas, matrices que sostiene las colas de animación, etc., de acuerdo a sus necesidades.

Answer 7

un ejemplo de esto puede verse en JQuery for Beginners - Day 2

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

Answer 8

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

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