Callback on dynamic animation completion

Question

I have the following code in which I add effects from two loops inside the queues:

tablaActual = ({ 1111: { titulo: "Nuevo Video 1", usuario: "RadioBot", alta: "1353182478" }, 2243: { titulo: "Old Boy Fashion", usuario: "RadioBot", alta: "1353182479" }, 3432: { titulo: "Britney spears", usuario: "RadioBot", alta: "1353182825" } }); tablaNueva = ({ 1111: { titulo: "Nuevo Video 1", usuario: "RadioBot", alta: "1353182478" }, 1112: { titulo: "Nuevo video 2", usuario: "RadioBot", alta: "1353182477" }, 1113: { titulo: "Nuevo video 3", usuario: "RadioBot", alta: "1353182476" } }); $("button").bind("click", function() { var body = $('body'); retardation = 500; i = 1; // we delete the old ones that doesnt match in the new table $.each(tablaActual, function(index) { if (!tablaNueva[index]) { delay = i * retardation; $('#lista #id' + index).delay(delay).slideUp("normal", function() { $(this).remove(); }).queue("cola1"); delete tablaActual[index]; i++; } }); // we add the new ones that doesnt match in the old table $.each(tablaNueva, function(index, vars) { if (!tablaActual[index]) { delay = i * retardation; $('<tr id="id' + index + '"><td class="cancion"><h3>' + vars.titulo + '</h3></td><td class="autor">' + vars.usuario + '<span>' + vars.alta + '</span></td></tr>').appendTo('#lista').hide().delay(delay).show('slow').queue("cola2"); tablaActual[index] = vars; i++; } }); $("tr:animated").promise().done(function() { alert("done"); }); }); 

jsFiddle

When all TR animations end, it should trigger a warning, but I think I'm doing it wrong, because the warning appears as soon as I press the start button.

How to do it?

Answer 1

I would use jQuery.Deferred () to make it work. By doing this, you queue up several pending objects that resolve after completing the corresponding animation of the elements.

In short, create an array of pending objects and wait for them using the somewhat odd jQuery.when.apply(...).done(function() { ... }) construct.

Check out this JSFiddle .

Answer 2

You can reschedule your warning (end the callback) in the callback to the show function and check if all animations are complete: http://jsfiddle.net/dSGWx/12/

 var totalmacth=0; var loop=0; // los que se tienen que añadir $.each(tablaNueva, function(index, vars) { if (!tablaActual[index]) { totalmacth++; delay = i * retardation; $('<tr id="id' + index + '"><td class="cancion"><h3>' + vars.titulo + '</h3></td><td class="autor">' + vars.usuario + '<span>' + vars.alta + '</span></td></tr>').appendTo('#lista').hide().delay(delay) .show('slow',function(){ loop++; console.log(loop + ' ' + totalmacth) if(loop === totalmacth) alert("done"); }); tablaActual[index] = vars; i++; } });