[英]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.