如何在表格行上使用 slideDown(或显示)功能? [英] How to Use slideDown (or show) function on a table row?

问题描述

我正在尝试向表格中添加一行并将该行滑入视图，但是向下滑动功能似乎向表格行添加了 display:block 样式，这会扰乱布局.

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?

代码如下:

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

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

推荐答案

表格行不支持动画.

来自 Chaffer 和 Swedberg 的Learning jQuery"

From "Learning jQuery" by Chaffer and Swedberg

表行呈现特定动画的障碍，因为浏览器使用不同的值(表行和块)用于它们的可见显示财产..hide() 和 .show()没有动画的方法总是与表行一起使用是安全的.作为jQuery 1.1.3 版，.fadeIn() 和.fadeOut() 也可以使用.

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.

<小时>

您可以将您的 td 内容包装在一个 div 中并在其上使用 slideDown.您需要决定动画是否值得额外的标记.

---

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.

这篇关于如何在表格行上使用 slideDown(或显示)功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！