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

我写了一个简短的方法来将行追加到表中.它如下：

/*--------------------------------------------------*/
/* 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(),它只是出现.我怎样才能让它正确动画？任何帮助表示赞赏,谢谢.

解决方法:

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.

标签：html,ria,javascript,jquery
来源： https://codeday.me/bug/20190902/1791583.html