jQuery Slide Up Table Row

The most elegant way to handle the slide and removal is to wrap each td's inner contents with a div, and to simultaneously reduce the padding of the td and the height of the divs. Check out this simple demo: http://jsfiddle.net/stamminator/z2fwdLdu/1/

I suspect this is partly a browser issue. You shouldn't really target <tr />'s since browsers interpret them differently. Additionally they behave differently than block elements.

In this example: http://jsfiddle.net/lnrb0b/3t3Na/1/ your code works partially in chrome. The <tr /> is allowed styling (unlike in some IE versions) but you can't animate it. If you make it display:block no worries, but then it's a bit rubbish as a table :)

In this example: http://jsfiddle.net/lnrb0b/3t3Na/2/ you'll see I've animated the <td />'s but they barely work and painfully slowly at that.

Have a test of those and I'll try think of a solution in the meantime.

addClass does not accept a callback function, since it performed immediately. I think you may want something more like this.

object.parent().parent().addClass('deleteHighlight').slideUp(1000, function() {
    $(this).remove();
}); 

Sure, you can!

Wrap each td of the tr you want slide up into a div, then slide up those divs!

Of course, you have to animate the paddings (top and bottom) of each td.

Here you can find a full example here:

http://jsfiddle.net/3t3Na/474/

Extract of my source code:

$('a').click(function(){
var object = $(this);
object.parent().parent().addClass('deleteHighlight', 1000, function() {
    $(this).find('td').each(function(index, element) {

    // Wrap each td inside the selected tr in a temporary div
    $(this).wrapInner('<div class="td_wrapper"></div>');

    // Fold the table row
    $(this).parent().find('.td_wrapper').each(function(index, element) {

    // SlideUp the wrapper div
    $(this).slideUp();

    // Remove padding from each td inside the selected tr
    $(this).parent().parent().find('td').each(function(index, element) {
        $(this).animate({
            'padding-top': '0px',
            'padding-bottom': '0px'
        }, function() {
            object.parentsUntil('tr').parent().remove();
        });
    });
});