Evento después de que un div ha terminado de animar?

Question

¿Cómo puedo hacer que una función se ejecute después de que un determinado elemento ha terminado de animar? Es una animación deslizable, el elemento está oculto y cuando se hace clic en algo, se volverá visible deslizando su contenido hacia abajo (+ altura).

tengo ningún control sobre la función de animación en ese elemento, por lo que no se puede utilizar la opción de devolución de llamada desde la función $ .animate ...

Ahora mismo tengo algo así como

$('.trigger').click(function(){ // <-- "trigger" will make the element animate 
    setTimeout(myfunction, 500); 
}); 

que trabaja pero no me gusta, se siente hacky

Answer 1

si estás usando jQuery 1.5 + se puede utilizar el método jQuery promise(): http://jsfiddle.net/rGBk7/

p. Ej.

/* do animation */ 
$("div").animate({ 'marginLeft' : '300px' }, 1000); 

/* attach a promise to animated element/s */  
$("div").promise().done(function() { 
    alert("animation end"); 
}); 

Ver http://api.jquery.com/promise/

Answer 2

¿Se refiere a:

$("div").queue(function(){ 
    your_function(); 
}); 

Será ejecutado después de la cola de la animación es completa