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.