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