Animando a eliminação de linhas da tabela em jQuery

Question

Eu escrevi algum código jQuery para usar a animação "slideUp" ao excluir linhas de uma tabela. Para que a animação a aparecer lisa, envolvi o conteúdo de cada TD na linha com marcas DIV, e chamado a função slideUp nas DIVs, removendo o TDS reais após a conclusão da animação. O código para isso é a seguinte:

$("tr[id$=" + rowID + "]").children("td").each(function() {
    $(this).children("div").slideUp(function() {
        $(this).parent().remove();
    });        
});

Até agora, tão bom. No entanto, notei que este código não remove a TR real, apenas seu conteúdo, então eu adicionei a seguinte linha para remover a TR:

$("tr[id$=" + rowID + "]").remove();

O problema é que, depois que eu adicionei a linha acima, a animação parar de trabalhar. Em outras palavras, a linha simplesmente desaparece sem o efeito agradável deslizante. Alguém sabe por que isso acontece e como obter em torno dele?

Answer 1

Porque você está removendo o tr que contém todos os elementos animados. Não há mais elementos, não mais animação. Dado que todos os slideUps deve tomar a mesma quantidade de tempo, você pode provavelmente começar afastado com a mudança da callback acabamento de $(this).parent().remove() para $(this).closest('tr').remove().

Answer 2

Eu escrevi um plugin jQuery que lhe permite fazer isso. Você pode adicionar e remover linhas e não requer envolvendo seus dados com um div ou qualquer coisa assim. Confira em http: // www.fletchzone.com/post/jQuery-Unobtrusively-Animated-Add-and-Remove-Table-Rows.aspx

Best,

Fletch