¿Cómo esperar a que termine una animación de jquery antes de que comience la próxima?

Question

Tengo el siguiente jQuery:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300); 
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); 

Mi problema es que ambos ocurren al mismo tiempo. Me gustaría que la animación div2 comience cuando termine la primera. He intentado el método de abajo, pero lo hace lo mismo:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, ShowDiv()); 
.... 
function ShowDiv(){ 
    $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); 
} 

¿Cómo puedo hacer que esperar a que el primero de ellos a fin?

Answer 1

http://api.jquery.com/animate/

animado tiene una función de "completo". Debería colocar la segunda animación en la función completa de la primera.

EDIT: ejemplo http://jsfiddle.net/xgJns/

$("#div1").animate({opacity:.1},1000,function(){ 
    $("#div2").animate({opacity:.1},1000);  
});​ 

Answer 2

Puede pasar una función como parámetro a la función animate(..) que se llama después de la animación completa. Como lo siguiente:

$('#div1').animate({ 
    width: 160 
}, 200, function() { 
    // Handle completion of this animation 
}); 

El siguiente ejemplo es una explicación más clara de los parámetros.

var options = { }, 
    duration = 200, 
    handler = function() { 
     alert('Done animating'); 
    }; 

$('#id-of-element').animate(options, duration, handler); 

Answer 3

No utilice un tiempo de espera, use la devolución de llamada completa.

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function(){ 

    $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); 

}); 

Answer 4

siguiendo lo kingjiv Dicho esto, usted debe utilizar la devolución de llamada complete a la cadena de estas animaciones. Casi lo tienes en tu segundo ejemplo, excepto que estás ejecutando tu devolución de llamada ShowDiv inmediatamente siguiéndolo entre paréntesis. Configúrelo en ShowDiv en lugar de ShowDiv() y debería funcionar.

La respuesta de mcgrailm (publicada mientras escribía esto) es en realidad la misma cosa, solo que usa una función anónima para la devolución de llamada.

Answer 5

$(function(){ 
    $("#div1").animate({ width: '200' }, 2000).animate({ width: 'toggle' }, 3000, function(){ 
    $("#div2").animate({ width: 'toggle' }, 3000).animate({ width: '150' }, 2000); 
    }); 
}); 

http://jsfiddle.net/joaquinrivero/TWA24/2/embedded/result/

Answer 6

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function() { 
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); }); 

Esto funciona para mí. No estoy seguro de por qué tu código original no funciona. Tal vez necesita ser incluido en una función anónima?