How to Use slideDown (or show) function on a table row?

Question

I'm trying to add a row to a table and have that row slide into view, however the slidedown function seems to be adding a display:block style to the table row which messes up the layout.

Any ideas how to work around this?

Here's the code:

$.get('/some_url', 
  { 'val1': id },

  function (data) {
    var row = $('#detailed_edit_row');
    row.hide();
    row.html(data);
    row.slideDown(1000);
  }
);

Answer 1

Animations are not supported on table rows.

From "Learning jQuery" by Chaffer and Swedberg

---

Table rows present particular obstacles to animation, since browsers use different values (table-row and block) for their visible display property. The .hide() and .show() methods, without animation, are always safe to use with table rows. As of jQuery version 1.1.3, .fadeIn() and .fadeOut() can be used as well.

---

You can wrap your td contents in a div and use the slideDown on that. You need to decide if the animation is worth the extra markup.