jQuery向上滑动表行

Question

我正在构建一个自定义jQuery插件,允许用户实时删除表中的记录,以及许多其他内容.删除记录后,我希望删除的表格行的背景颜色变为红色,然后向上滑出视图.

下面是我的代码片段,它不会执行任何颜色更改动画,也不会向上滑动行.但是,当完成幻灯片动画时,它会删除该行.查看以下代码时需要了解的一些事项:

1. "object"变量是对该对象的jQuery引用,该对象被单击并触发了删除操作.
2. "object.parent().parent()"对象是要删除的行.
3. "deleteHighlight"CSS类包含将该行变为红色的颜色.
4. "addClass"方法使用jQueryUI的"addClass"方法,而不是jQuery.它允许动画效果和回调.

---

object.parent().parent().addClass('deleteHighlight', 1000, function() {
//Fold the table row
  $(this).slideUp(1000, function() {
  //Delete the old row
    $(this).remove();
  });
});

这是执行此操作的HTML,没有什么特别之处:

<table class="dataTable">
<thead>
<tr>
<th>&nbsp;</th>
<th>Title</th>
<th>Content Snapshot</th>
<th>Management</th>
</tr>
</thead>

<tbody>
<tr class="odd" id="11" name="1">
<td class="center width50"><a class="dragger"></a><a class="visibilityTrigger eyeShow"></a></td>
<td class="center width150">Title</td>
<td>
<div class="clipContainer">Content</div>
<div class="hide contentContainer">Content</div>
<div class="hide URLContainer">my-url</div>
</td>
<td class="center width75"><a class="edit"></a><a class="delete"></a></td>
</tr>
</tbody>
</table>

有人可以提供一个如何解决这个问题的例子吗？

感谢您的时间.

Answer 1

我怀疑这部分是浏览器问题.你不应该真正瞄准<tr />,因为浏览器对它们的解释不同.另外,它们的行为与块元素不同.

在这个例子中:http://jsfiddle.net/lnrb0b/3t3Na/1/你的代码部分在chrome中工作.在<tr />被允许的造型(不像某些版本的IE),但你不能制作动画.如果你display:block不用担心,那么它就像桌子一样有点垃圾:)

在这个例子中:http://jsfiddle.net/lnrb0b/3t3Na/2/你会看到我已经为<td />它们制作了动画,但它们几乎没有工作,而且很慢.

对这些进行测试,我会尝试在此期间考虑解决方案.

Answer 2

处理滑动和移除的最优雅的方法是td用a 包裹每个内部内容,div同时减少s 的填充td和高度div.看看这个简单的演示:http://jsfiddle.net/stamminator/z2fwdLdu/1/