Question

If you go to this page and click on the unsubscribe link the corresponding table row is immediately deleted. However the code executed is:

SF.delete = function(selector) {
    $(selector).slideUp('slow').remove();
};

So you should see the element slowly slide up, rather than just immediately disappearing. Why is this effect not working? I’m seeing the same behavior in both firefox and chrome.

Update

I’ve implemented SLaks‘ suggestion at the URL above. However, the image “jumps” sidewards as the row slides up. I’m guessing this is caused by the insertion of the <div>, is there any way to make it a bit smoother?

Answer 1

Table rows will always be tall enough to hold their contents, so when jQuery reduces the row’s height, nothing happens.

Instead, you can write

$('tr')
    .children('td, th')
    .animate({ padding: 0 })
    .wrapInner('<div />')
    .children()
    .slideUp(function() { $(this).closest('tr').remove(); });