如何使用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'); } 
});