Comment ajouter des effets de transition aux lignes de table avec jQuery

Question

Le code jQuery suivant permute les rangées de la table lorsque certains boutons sont cliqués. Je voudrais savoir comment ajouter un effet de transition pour qu'il y ait un effet de transition de fondu entrant ou sortant quand une ligne est déplacée (au lieu que la modification se produise instantanément). Je ne suis pas sûr où et comment appliquer la transition!

// Move item to top or up/down by one 
$(".top,.up,.down").click(function(){ 

    // This row 
    var row = $(this).parents("tr:first"); 

    // When up is pressed 
    if ($(this).is(".up")) { row.insertBefore(row.prev()); } 

    // When top is pressed 
    else if ($(this).is(".top")) { var firstRow = row.parent().find("tr:first").not(row); row.insertBefore(firstRow); } 

    // When down is pressed 
    else { row.insertAfter(row.next()); } 

Answer 1

Dans jQuery, vous pouvez les actions de la chaîne ensemble ... chercher here pour une Tut sur enchaînant dans jQuery

$(".top,.up,.down").click(function(){ 

     // This row 
     var row = $(this).parents("tr:first"); 

     // When up is pressed 
     if ($(this).is(".up")) { row.fadeOut().insertBefore(row.prev()).fadeIn(); } 

     // When top is pressed 
     else if ($(this).is(".top")) { 
        var firstRow = row.parent().find("tr:first").not(row); 
        row.fadeOut().insertBefore(firstRow).fadeIn(); 
       } 

     // When down is pressed 
     else { row.fadeOut().insertAfter(row.next()).fadeIn(); } 

Answer 2

Utilisez .fadeOut() et .fadeIn() comme ceci:

// Move item to top or up/down by one 
$(".top,.up,.down").click(function(){ 

    // This row 
    var row = $(this).parents("tr:first"); 

    // When up is pressed 
    if ($(this).is(".up")) { row.fadeOut('slow'); row.insertBefore(row.prev()); row.fadeIn('slow'); } 

    // When top is pressed 
    else if ($(this).is(".top")) { var firstRow = row.parent().find("tr:first").not(row); row.fadeOut('slow'); row.insertBefore(firstRow); row.fadeIn('slow'); } 

    // When down is pressed 
    else { row.fadeOut('slow'); row.insertAfter(row.next()); row.fadeIn('slow'); } 
});