Necesito una devolución de llamada para ejecutar una vez que varios elementos hayan terminado de animarse. Mi selector de jquery es el siguiente:
$('.buttons').fadeIn('fast',function() { // my callback });El problema con esto es que la clase de botones coincide con una serie de elementos, todos los cuales deben aparecer antes de que se ejecute la devolución de llamada. Tal como está ahora, la devolución de llamada se ejecuta después de que cada elemento individual haya terminado de animarse. Esta NO es la función deseada. Estoy buscando una solución elegante para que mi devolución de llamada solo se ejecute una vez después de que todos los elementos coincidentes hayan terminado de animarse. Esta pregunta ha aparecido en algunos lugares, incluido SO, pero nunca ha habido una respuesta elegante (ni siquiera una respuesta definitiva; las soluciones que funcionan para una persona no funcionan en absoluto para otras).
jQuery introdujo una promesa en la versión 1.6 y es mucho más elegante que agregar contadores.
Ejemplo:
// Step 1: Make your animation $(".buttons").each(function() { $(this).fadeIn("fast"); }); // Step 2: Attach a promise to be called once animation is complete $(".buttons").promise().done(function() { // my callback });Para recopilar animaciones de elementos no relacionados en una sola devolución de llamada, puede hacer esto:
$.when( $someElement.animate(...).promise(), $someOtherElement.animate(...).promise() ).done(function() { console.log("Both animations complete"); });Una alternativa a la respuesta de @Ross que siempre activará la devolución de llamada en el último botón para aparecer gradualmente (que puede o no ser el último botón al que se le indicó animar) podría ser:
var buttons = $(".buttons"); var numbuttons = buttons.length; var i = 0; buttons.fadeIn('fast', function() { i++; if(i == numbuttons) { //do your callback stuff } });