jQuery：slideDown不合時宜地沒有動畫

Question

我寫了一個簡短的方法來將行追加到表中。 它如下：

/*--------------------------------------------------*/
/* Append a row to the documentation heading table. */
/*--------------------------------------------------*/
function append_heading(heading, style, default_content, node_enabled, leaf_enabled)
{
    // Grab the table body.
    var tbody = $("#headings_table_body");

    // Generate our cells.
    var headingCell = $('<td class="heading_column"></td>');
    var styleCell = $('<td class="style_column"></td>');
    var defaultCell = $('<td class="default_column"></td>');
    var nodesCell = $('<td class="nodes_column ticked"></td>');
    var leavesCell = $('<td class="leaves_column ticked"></td>');

    // Fill in various cells.
    headingCell.append(heading);
    styleCell.append(style);
    defaultCell.append(default_content);

    // Tick some cells cross the others.
    if(node_enabled)
    {
        nodesCell.addClass("ticked");
    }

    else
    {
        nodesCell.addClass("crossed");
    }

    if(leaf_enabled)
    {
        leavesCell.addClass("ticked");
    }

    else
    {
        leavesCell.addClass("crossed");
    }

    // Add all the cells to one big row.
    var tr = $("<tr></tr>")
        .append(headingCell)
        .append(styleCell)
        .append(defaultCell)
        .append(nodesCell)
        .append(leavesCell);

    // Append the row to the table.
    tbody.append(tr);

    $(tr).hide();
    $(tr).slideDown("slow");
}

它按預期附加行，所有行都很好地填充和樣式。 問題是，slideDown沒有動畫：它的當前行為類似於我調用hide（）和show（），它只是出現。 我怎樣才能讓它正確動畫？ 任何幫助表示贊賞，謝謝。

Answer 1

jQuery無法直接為表動畫。 您需要的只是將行中每個td單元格的內容用display：none包裝到div中，並為它們制作slideDown動畫！ 讓你的生活更輕松:)））

 tr.find('td').wrapInner('<div style="display: none;" />');
 tr.appendTo(tbody);
 tr.find('td > div')
             .slideDown('slow', function(){
                  var $set = $(this);
                  $set.replaceWith($set.contents());
             });

如果要為整個表設置動畫，則應將其放置到div中，並將動畫應用於該div。

Answer 2

我假設它是因為它不知道附加TR的高度，嘗試在CSS中明確定義TR的高度或修改代碼來做

$(tr).height($(tr).height());
$(tr).hide();
$(tr).slideDown("slow");