Ligne fadeOut et fadeIn comme dernière ligne

Question

J'essaie de faire apparaître fadeOut une ligne et fadeIn comme dernière ligne de la table, mais je n'arrive pas à faire fonctionner le fadeIn.

Actuellement, j'ai ceci:

function Test(control) { 
      var row = $(control).parents('tr'); 

      row.find("td").fadeOut('slow', function() { 
       var lastRow = $("#table1 tr:last"); 
       lastRow.after(row).fadeIn('slow'); 
      }); 
     } 

Même si je laisse hors fadeIn lastRow.after (ligne) ne semble pas fonctionner.

Answer 1

.after() retours lastRow, pas la ligne que vous avez inséré après comme vous voulez, donc utiliser .insertAfter() comme ceci:

function Test(control) { 
    var row = $(control).closest('tr'); 
    row.fadeOut('slow', function() { 
    row.insertAfter("#table1 tr:last").fadeIn('slow'); 
    }); 
} 

Notez également que nous sommes la décoloration de la <tr> nous décoloration revenir, pas l'individu <td> éléments (l'effacement du parent n'aide pas si les enfants sont cachés). Regardez aussi .closest() au lieu de .parents() ... c'est beaucoup moins cher/plus précis.

---

Ce qui précède a été conçu pour montrer la version corrigée, vous pouvez aussi mince vers le bas pour:

function Test(control) { 
    $(control).closest('tr').fadeOut('slow', function() { 
    $(this).insertAfter("#table1 tr:last").fadeIn('slow'); 
    }); 
} 

Answer 2

Que diriez-vous ceci:

$('tr').fadeOut(500, function(){ 
     $(this).appendTo('table').fadeIn(500); 
    }); 

Try it

Answer 3

vous pouvez également utiliser

$(this).fadeIn('slow').insertAfter("#table1 tr:last")