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");

jQuery：slideDown不合时宜地没有动画

2 个答案: