jQuery почему $ ('tr'). slideDown ('медленный'); разбить макет таблицы?

Question

Может кто-нибудь сказать мне, почему при использовании $('tr').slideDown('slow'); это приводит к тому, что строка таблицы забывает о своей ширине, высоте и т. Д.

а есть ли способ это исправить?

Answer 1

Анимации не поддерживаются в строках таблицы.
Эмили набрала здесь
вы можете поместить содержимое в div внутри td и сделать слайддаун в div ...

Answer 2

Я исправил ту же проблему с добавлением div в текущую строку таблицы-> ячейки (TR-> TD).

Моя таблица образцов:

<table>
<tr id='row_1'>
   <td><div>element 1</div></td>
   <td><div>element 2</div></td>
   <td><div>element 3</div></td>
</tr>
<tr id='row_2'>
   <td><div>element 1</div></td>
   <td><div>element 2</div></td>
   <td><div>element 3</div></td>
</tr>
<tr id='row_3'>
   <td><div>element 1</div></td>
   <td><div>element 2</div></td>
   <td><div>element 3</div></td>
</tr>
</table>

Тогда, если вам нужно это сделать:

$('#row_1').slideDown(); // Make this onclick or some other event
$('#row_1').slideUp(); // Make this onclick or some other event

Вы должны сделать:

$('#row_1 div').slideDown(); // Make this onclick or some other event
$('#row_1 div').slideUp(); // Make this onclick or some other event

Некоторые строки кода больше, но не нашли другого способа решить эту проблему.

Answer 3

Я подозреваю, что это потому, что код анимации jQuery предполагает, что он может использовать display: block для элементов, которые кажутся элементами блочного уровня. Для <tr> это было бы плохо, потому что оно хочет быть display: table-row (я думаю; что-то в этом роде).