jQuery Slide Up Table Row

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.

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/

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