Question

I’ve written a short method to append rows to a table. It is as follows:

/*--------------------------------------------------*/
/* 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");
}

It appends the rows as expected, all nicely filled out and styled. The problem is, slideDown doesn’t animate: It’s current behaviour is analogous to me calling hide() and show(), it simply appears. How can I get this to animate correctly? Any help is appreciated, thanks.

Answer 1

jQuery is NOT able to animate tables directly. All that you need is to wrap the content of each td cell in the row into div with display:none and make slideDown animation for them! To make you life easier :)))

 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());
             });

If you want to animate the whole table, it should be placed into div with animation applied to that div.