javascript - 动画表格行滑出或淡入？

Question

我偶然发现了这个插件

https://jquery-datatables-row-grouping.googlecode.com/svn/trunk/customization.html

问题是，一切都在 <tr> 中s，我担心你不能为它们制作动画？

真的没有办法吗？明智的 CSS 或 javascript。

例如我想为表格 tr 元素设置动画。

Answer 1

也许一个解决方案可能是这样的:

var animate = function(evt) {
  //we go to the 'tr' tag
  $el = $(evt.currentTarget).parent().parent();
  
  //we hide the 'td's tag 
  $el.find('td').hide(333 , function(){
    // we reduce the height of 'tr' tag
    $el.animate({height : 0} , 777)
  });
  

}
$('button').click(animate);

table {
  border: solid 1px #AAA;
  padding: 3px;
  border-collapse: separate;
}
td {
  height: 50px;
  margin : 3px;
  min-width : 50px;
  border: solid 1px orange;
}
tr {
  height : 55px;
  padding : 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>a</td><td>b</td><td><button>hide</button></td>
  </tr>
  <tr>
    <td>a</td><td>b</td><td><button>hide</button></td>
  </tr>
  <tr>
    <td>a</td><td>b</td><td><button>hide</button></td>
  </tr>
</table>