Как добавить эффекты перехода к строкам таблицы с помощью 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'); } 
});