[英]Callback when animations created dynamically finish
我有下面的代码,我在队列中的两个循环中添加了效果:
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");
});
});
当所有TR动画完成时,它应该触发警报,但是我认为我做错了,因为单击运行按钮后,警报就会弹出。
我该怎么做呢?
我会使用jQuery.Deferred()使其工作。 通过这样做,您可以使许多延迟的对象排队,一旦相应的项目动画完成,这些对象就会解析。
简而言之,创建一个延迟对象数组,然后使用有点奇怪的jQuery.when.apply(...).done(function() { ... })
构造它们。
看看这个JSFiddle 。
您可以在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++;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.