Table animations are not supported presently in jQuery (1.8.1 or less). Thus, when someone needs a tr to slide up/down, this is a nightmare. So, I devised a simple script in which we can slide a tr up or down.

Unfortunately, it is not in a plugin format as of yet. You will have to deal with it as-is for now.

Usage

slide_tr($("tr:last-child"), 500, "up");

The first argument should be a jQuery selector that points to a table row (TR) element. The second should be a duration ("slow", "fast", or a millisecond value). The third and final argument should be "up", "down", or "toggle"--the direction of the sliding.

Code

function slide_tr($tr, duration, direction) {
    if (duration == undefined)
        duration = "slow";
    if (direction == undefined)
        direction = "toggle";

    if (direction == "toggle") {
        if ($tr.is(":visible"))
            direction = "up";
        else
            direction = "down";
    }

    if (direction == "up") {
        $tr.find('td').each(function() {
            var $td = $(this);
            var paddings = $td.css("padding-top") + "," + $td.css("padding-right") + "," + $td.css("padding-bottom") + "," + $td.css("padding-left");
            $td.data("padding", paddings).animate({ paddingTop: '0px', paddingBottom: '0px' }, { "duration": duration }).wrapInner('<div class="tr_slider_up" style="display: block;" />').find('div.tr_slider_up').slideUp(duration, function() {
                var paddings = $td.data("padding").split(",");
                $td.css({
                    paddingTop: paddings[0],
                    paddingBottom: paddings[2],
                });

                var $set = $(this);
                $set.replaceWith($set.contents());
            });
        });
    } else {
        $tr.show().find('td').each(function() {
            var $td = $(this).show();
            if ($td.data("padding") != undefined) {
                var paddings = $td.data("padding").split(",");
                $td.css({ paddingTop: '0px', paddingBottom: '0px' }).animate({ paddingTop: paddings[0], paddingBottom: paddings[2] }, { "duration": duration });
            }
            $td.wrapInner('<div class="tr_slider_down" style="display: none;" />').find('div.tr_slider_down').slideDown(duration, function() {
                var $set = $(this);
                $set.replaceWith($set.contents());
            });
        });
    }
}