动态创建的动画完成时的回调答案

【问题标题】：Callback when animations created dynamically finish动态创建的动画完成时的回调
【发布时间】：2012-11-06 14:59:22
【问题描述】：

我有以下代码，我从队列中的两个循环添加效果：

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

当所有的 TR 动画完成后，它应该会触发警报，但我认为我做错了，因为我一点击运行按钮就会弹出警报。

我该怎么做？

【问题讨论】：

标签： javascript jquery animation queue

【解决方案1】：

我会使用 jQuery.Deferred() 让它工作。通过这样做，您可以将多个延迟对象排队，这些延迟对象会在相应的项目动画完成后解析。

简而言之，创建一个延迟对象数组并使用有点奇怪的构造 jQuery.when.apply(...).done(function() { ... }) 等待它们。

看看this JSFiddle。

【讨论】：

【解决方案2】：

您可以在show 函数的回调中移动警报（完成回调）并测试是否所有动画都已完成：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++;
    }      
});

【讨论】：

我认为 mzedeler 方式更好，你同意吗？
我同意。我的回答是解决您的问题的简单方法，@mzedeler 的回答最简洁。