delete table row with effect
<p>On <a href="http://summer-festivals.cloudfoundry.com/artistSubscription/list" rel="nofollow">this page</a>, if you click the unsubscribe button on the first row (Madonna), the rows beneath slide up reasonably nicely. But if you then delete the new first row (Radiohead), the image on the remaining row (U2) jumps unpleasantly to the left after the row moves into position. The function that's called to perform the table row deletion is:</p>

<pre><code>SF.deleteRow = function(selector) {
    $(selector)
        .children('td, th')
        .animate({ paddingTop: 0, paddingBottom: 0 })
        .wrapInner('&lt;div /&gt;')
        .children()
        .slideUp('slow', function() {
            $(this).closest('tr').remove();
        });
};
</code></pre>

<p>If I remove all the padding in the table cells, this problem disappears, but then I have no padding.....</p>

<p>Is there any way to fix this problem? Alternatively, is there another effect I can apply when deleting a table row that avoids this problem (I don't want the row to just disappear instantly when the Unsubscribe button is clicked).</p>
