如何使用jQuery将转换效果添加到表行中

Question

以下jQuery代码会在单击某些按钮时交换表行。我想知道如何添加转场效果，以便在移动一行时（而不是瞬间发生的变化）存在淡入或淡出过渡效果。我不确定在何处或如何应用转换！

// 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

在jQuery中，你可以链行动起来...看看here的啧啧在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

使用.fadeOut()和.fadeIn()链接，像这样：

// 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'); } 
});